前端知识10 viewport常见设置都有哪些?

Scroll Down

在移动端做开发时,必须要搞清楚 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 像素(独立像素)

参考文章:移动前端开发之 viewport 的深入理解

补充

viewport 基本上只对移动端网页有用,一般移动端的网页我们是这么写的:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1 minimum-scale=1 user-scalable=no”>

window.outerWidth 是屏幕宽度,这是固定不变的 。
window.innerWidth 是视口宽度
document.documentElement.clientWidth 也就是标签的宽度。
后面两个值都要根据前面的进行换算。

如何换算?

首先我们要定义个变量scale``? 根据标签里的 initial-scale=1, maximum-scale=1 minimum-scale=1`算出来的, 如果不指定这三个默认是1, 我们定义scale表示缩放比,scale默认等于1

meta标签width和height属性都有默认值
width: 默认是 980 / scale, 单位px, 如果设置为device-width, 则使用window.outerWidth 的值
height: 默认是 980 / (window.outerWidth / window.outerHeight) / scale , 单位px

但如果width和height只有一个属性有值。
会根据 width / height == window.outerWidth / window.outerHeight 这样的换算关系算出对应的width和height。

几个属性的计算规则:

window.innerWidth = window.outerWidth / scale
document.documentElement.clientWidth  = Math.max(width, window.innerWidth) // 不能小于innerWidth

如果我们加上了开头那句meta标签,我们的网页就不能缩放,放大比例为1
也就是下面三个值相等:
window.outerWidth == window.innerWidth == document.documentElement.clientWidth
最后:屏幕尺寸=视口尺寸=html尺寸(html标签)