viewport的设置

发表于 | 分类于 |

给段简单的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        body {
            margin: 0;
        }

        div {
            width: 750px;
            height: 100px;
            background: green;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

我们知道 iPhone6/7/8 的设备像素为750×1334，其 css 像素为375 × 667。那么上面这段代码给了 div 的宽度为750px，试图使这个div刚好铺满顶部。如果移动端中是以设备像素来显示的话，绿色部分应该铺满整个页面的顶部，如果移动端中式以 css 像素来显示的话，绿色部分不仅铺满了顶部还应该超出来显示滚动条。但是都没有。

这是因为在移动端中移动端屏幕的宽度默认为980，但不同的型号也会不同。

所以上面的例子中，viewport的视口宽度其实是980，而我们设置的宽度为750，故没有铺满。我们可以通过document.documentElement.clientWidth方法获取到viewport的大小。

若想一个网站在移动端设备网页显示正常，我们必须设置一个正确的viewport的值。viewport的值决定了移动端页面是否正常显示。

我们可以使用meta标签来设置 viewport 的大小。平时默认和建议设置为：

1
2
3
4
5
6
<meta name="viewport"
      content="width=device-width,
               initial-scale=1,
               minimum-scale=1,
               maximum-scale=1,
               user-scalable=no">

content视口里的相关设置:

  • width：视口的宽度，值为一个正整数，或字符串device-width（设备的实际宽度–css像素，在iPhone6中这个device-width就是375）。不建议设置数字（安卓设备有些不支持）
  • height：视口的高度，一般不设置
  • user-scalable 是否允许用户进行页面缩放，值为no或yes，代表不允许与允许
  • initial-scale 页面初始缩放值，值为一个数字（可以带小数）。initial-scale缩放比=css像素/viewport宽度
  • minimum-scale 页面最小能够缩放的比例，值为一个数字（可以带小数）。
  • maximum-scale 页面最大能够缩放的比例，值为一个数字（可以带小数）。
    ​

这时候，将div的宽设为375px，就可以刚好铺满顶部了。

注意：
1、有的时候大家会见到同时写了不允许缩放，又写了最小与最大能够缩放的比例，那这样不是冲突了，为什么都已经写了不允许缩放了，还要写那些？
​ 原因：
​ 1、会有一些第三方的工具能够破坏user-scalable
​ 2、像iphone5下还会有黑边
​ 3、所以写全了，可以避免一些bug
​ 2、ios10不支持user-scalable=no，后面事件解决（阻止document的touchstart的默认行为）
​