1. 犀牛前端部落首页
  2. Html5百科

viewport常见设置理解

在移动端做开发时,必须要搞清楚 viewport 这一设置。

viewport 就是视区窗口,也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域,但在移动端上 viewport 会超出设备的显示区域(即会有横向滚动条出现)。
设备默认的 viewport 在 980 – 1024 之间。

为了让移动端可以很好地显示页面,因此需要对 viewport 进行设置。相关的设置值如下:

viewport设置
设置 解释
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许

viewport 是在 meta 标签内进行控制。

// width=device-width, initial-scale=1.0 是为了兼容不同浏览器
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

相关的衍生知识: dpr 与 CSS 像素。CSS 像素的 1px 在 PC 端上与设备的物理像素基本一致,而到手机端就会有两个物理像素对应一个 CSS 像素的情况出现(如 iPhone 的视网膜屏)。
所以 iPhone 上的 dpr = 2 即 2 个物理像素 / 一个 CSS 像素(独立像素)

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2676.html

发表评论

登录后才能评论