在移动端做开发时,必须要搞清楚 viewport
这一设置。
viewport
就是视区窗口,也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域,但在移动端上 viewport
会超出设备的显示区域(即会有横向滚动条出现)。
设备默认的 viewport
在 980 – 1024 之间。
为了让移动端可以很好地显示页面,因此需要对 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