今天小编跟大家讲解下有关h5页面的viewpoint ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关h5页面的viewpoint 的相关资料，希望小伙伴们看了有所帮助。
只要写手机端的h5页面 viewpoint是绕不过的坎 不处理好这个东西 h5页面就无法正常显示。那它到底是怎么回事呢
网上曾看到一个据说很有名的外国人 写过一篇"三个viewpoint"的概念 但是看了 觉得似懂非懂 后来做了不少h5页面 然后重新思考viewpoint到底是一种怎样的控制移动端页面的机制 于是我也觉得用"3个viewpoint"解释比较好说 不过跟网上那个外国大佬的"三个viewport"可能会有不少区别
第一个viewpoint 这里临时命名为viewpoint1 就是手机硬件屏幕的水平像素数 比如iPhone6分辨率是750像素 那么这个viewpoint就是750第二个viewpoint 这里临时命名为viewpoint2 是设计稿尺寸宽度 通常是以一个用户占有率比较高的手机分辨率为基准 很多就是用iPhone6的750第三个viewpoint 这里临时命名为viewpoint3 就是手机浏览器画布的宽度 它通常有一个远大于硬件分辨率的尺寸 比如980px 和主流PC端网页的内容主体宽度相当。前端能够直接施加影响的就只有viewpoint3这个了 实际上客观存在的viewpoint可以说也只有这一个而已 可以在html中用标签meta设置 也可以js动态设置。
最终用手机浏览h5页面看到的效果 则是这三个viewpoint共同作用的。 在没有代码干预的情况下 一般手机会有一个从viewpoint3到viewpoint1的缩放。手机为什么要设计这个机制呢 因为手机硬件屏幕小 但是又想让手机能正常浏览PC的页面。
为了更好的体验 人们开始为手机定制web页面 比如既然iphone6是750px 那我就做750px的页面。可是即便如此 手机实际看到的页面效果却仍然是被缩放了 因为750px的页面还是要放入到980px的viewpoint3中来显示 而缩放是viewpoint3到viewpoint1的过程 和设计稿宽度 同时也是页面实际宽度的viewpoint2是无关的。
如果我不想页面缩放呢 那就可以把viewpoint3的默认值980px改成viewpoint2设计稿的宽度750px 然后viewpoint3到viewpoint1的缩放就成了750px到750px的缩放 也就是没有缩放。有人可能说 你这750px是给iPhone6专门设计的 其他分辨率的手机呢 其他手机基本也会正常显示 和iPhone6的区别仅仅是有缩放和没缩放 但实际效果差不多 因为其他主流手机分辨率就算和iPhone6不同也不会差很远 所产生的缩放的效果也很微小。
这就是所谓三个viewpoint共同决定页面效果的机制了 实际挺主流的一种做法用了一堆js 它又是怎么做的呢 以后有空慢慢说吧。
来自：https://my.oschina.net/710409599/blog/3151129
来源：爱蒂网