移动端H5 viewport

CntChen 发布于2019-08-30 15:53 / 2777人阅读

摘要：移动端页面大家都遇到过的问题。移动端适配方案上移动端适配方案下本文对做一些补充手机屏幕手机屏幕属于硬件属性，我们无论是通过还是标签都是无法影响到它的。很多没有对移动端做适配的网页，我们用手机打开，发现网页被缩小到手机屏幕这么宽了。

移动端页面大家都遇到过 viewport 的问题。关于 viewport 的文章有很多了，推荐给大家这两篇，写得非常详细。
移动端适配方案(上)
移动端适配方案(下)

本文对 viewport 做一些补充

手机屏幕

手机屏幕属于硬件属性，我们无论是通过 JS 还是 meta 标签都是无法影响到它的。

手机屏幕物理像素，也就是手机厂商们说的像素、分辨率、PPI这些。

安卓常见的有 720X1280 , 1080X1920 等等
iPhone 则是 iPhone5 640X1136，iPhone6 750X1334，iPhone6P 1080X1920

手机屏幕逻辑像素，物理像素经过折算之后的像素数。也就是理想视口的尺寸

iPhone5 屏幕本来是 640px 宽，但是折算成了 320px
iPhone6 物理像素 750px 款，折算成 375px
iPhone6P 略微奇葩一点，物理像素实际 1080px 宽，但是系统向外暴露的确是 1242px，再折算成了 414px

screen.width/height 可以获取屏幕的逻辑像素

布局视口 layout viewport

刚才讲过的屏幕物理像素和逻辑像素，这些都是手机厂商设置好的，我们是无法设置的，重点再与接下来的两个视口，大家千万别混淆了。

layout viewport 相当于浏览器的宽度。
我们是可以通过设置的。
默认情况下，layout viewport 一般为 980px 宽。

document.documentElement.clientWidth 可以获取 layout viewport 的宽度。

视觉视口 visual viewport

视觉视口可以看作是手机屏幕这么大的一个窗口，但是它能显示的像素个数却不是屏幕上面的这么多逻辑像素。

视觉视口不太容易理解，虽然手机屏幕的逻辑像素已经固定了，比如 iPhone5 是 320px。

但是屏幕这 320px 宽，却可以显示 980px 宽的内容，所以视觉窗口的宽度是 980px。
很多没有对移动端做适配的网页，我们用手机打开，发现网页被缩小到手机屏幕这么宽了。

重点就在于缩放，缩放让320px的屏幕能显示更多内容了。
window.innerWidth 可以获取 visual viewport 的宽度。

通过可以设置 visual viewport 的宽度。
visual viewport 的宽度为 screen.width / initial-scale
同时，也会影响到布局视口的宽度，因为布局视口的宽度始终大于等于 visual layout 的宽度。

如果不设置 initial-scale ，iOS设备会自动将 visual viewport 缩放到 布局视口一样大。

还记得默认的布局视口是多宽吗？

屏幕逻辑像素、布局视口、视觉视口三者的关系

将 layout viewport 的宽度设置为屏幕宽

将 layout viewport 宽度设置为 640px （逻辑像素，而不是物理像素）

将 visual viewport 设置为屏幕宽度的 2 倍（正确的理解是：visual viewport 的 0.5 倍是屏幕宽度，所以 visual viewport 的宽度就是屏幕的2倍了）

此时布局视口的宽度也是屏幕宽的2倍，而不再是默认的 980px 了

总结：

1、默认情况下 layout viewport 为 980px
2、width=x 设置布局视口，initial-scale=y 设置视觉视口
3、如果只设置 布局视口 和 视觉视口 中的一个，那么另一个也是同样的宽度
4、布局视口 的宽度始终大于等于 视觉视口

举例 iPhone 5 上面

那么视觉视口和布局视口分别是多宽呢？

最后的最后，终于到了我们耳熟能详的

大家知道这是什么意思了吧。
layout viewport 浏览器窗口，设置为屏幕宽度。
visual viewport 也设置为屏幕宽度，不缩放，屏幕有多宽，就显示多少像素。
也就是所谓的完美视口。

GPU云服务器云服务器移动端webrtc h5 H5移动端上传图片手机端webrtc h5 视频直播h5端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116577.html

移动端H5 viewport

摘要：移动端页面大家都遇到过的问题。移动端适配方案上移动端适配方案下本文对做一些补充手机屏幕手机屏幕属于硬件属性，我们无论是通过还是标签都是无法影响到它的。很多没有对移动端做适配的网页，我们用手机打开，发现网页被缩小到手机屏幕这么宽了。移动端页面大家都遇到过 viewport 的问题。关于 viewport 的文章有很多了，推荐给大家这两篇，写得非常详细。移动端适配方案(上)移动端适配方案...

mzlogin 2019-08-21 11:31 评论0 收藏0
移动端H5 viewport

摘要：移动端页面大家都遇到过的问题。移动端适配方案上移动端适配方案下本文对做一些补充手机屏幕手机屏幕属于硬件属性，我们无论是通过还是标签都是无法影响到它的。很多没有对移动端做适配的网页，我们用手机打开，发现网页被缩小到手机屏幕这么宽了。移动端页面大家都遇到过 viewport 的问题。关于 viewport 的文章有很多了，推荐给大家这两篇，写得非常详细。移动端适配方案(上)移动端适配方案...

draveness 2019-08-01 16:27 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0