HTML5移动端-viewport的详解(2)-木庄网络博客

2022-03-15 11:39:05 PHP中文网 JavaScript 百度已收录

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

总结：

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

举例 iPhone 5 上面

1	`<meta` `name="viewport"` `content="width=600,initial-scale=0.5">`

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

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

1	`<meta` `name="viewport"` `content="width=device-width,initial-scale=1.0">`

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

以上就是HTML5移动端-viewport的详解的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

更多相关阅读请进入《HTML5》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者