code前端网了解常用视口设置
在移动端开发时，需要了解设置viewport。
viewport是视口窗口，是浏览器中显示网页的部分。在PC上基本等于设备的显示区域，但在移动设备上viewport会超出设备的显示区域（即会出现水平滚动条）。
默认单位viewport介于 980 – 1024 之间。
为了让移动端能够正常显示页面，必须输入viewport。相关设置值如下：
| 输入 | 解释一下 |
|---|---|
| 宽度 | 将布局视口的宽度设置为正整数，或字符串“width-device” |
| 首字母-scale | 输入页面的第一个缩放值，该值是数字，可以包含小数 |
| minimum-scale | 用户允许的最小缩放值为数字，允许小数点 |
| 最大-scale | 用户允许的最大缩放值为数字，允许小数点 |
| 高度 | 设置布局视口的高度。这个属性对我们来说不重要，很少使用 |
| 用户-scalable | 是否允许用户缩放，值为“no”或“yes”，no表示不允许，yes表示允许 |
viewport 已在 meta 标签中选中。
//width=device-width,初始-scale=1.0是为了兼容不同浏览器
相关衍生知识：dpr和CSS像素。 PC端的CSS像素1px与设备上的物理像素基本一致。在移动端，将有两个物理像素等于一个 CSS 像素（如 iPhone 的 Retina 显示屏）。
所以 dpr = 2 在 iPhone 上即 2 个物理像素 / 1 个 CSS 像素（独立像素）
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
上一篇：比较 px、em 和 rem 下一篇：HTML5 !DOCTYPE HTML 懂
相关文章
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。