关于html中viewport和initial-scale以及device-width的理解

上图是一些放大镜，不是打酱油的…

我们在初始化一个html页面的时候，往往会首先在页面头部加上这样一个标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

那么这个标签中viewport，width=device-width, initial-scale=1分别都是什么意思，为什么需要这样设置呢？

首先说一下viewport，中文翻译过来可以称为视窗。

我举个简单的例子：

比如你使用放大镜去看清明上河图

原谅我的渣渣绘图，虚线是放大镜，也就是可视视口visual viewport，也就是你只能看到这么多。

而清明上河图这幅画本身就是布局视口layout viewport，是原原本本图的大小。

当我们想看到清明上河图更多内容（缩小）或更多细节（放大）的时候，就会去配置上述的标签。

但值得注意的是，当你在页面放大或缩小的时候，仅仅是改变放大镜的倍率，言下之意，变的是可视视口，布局视口是不变的，也就是清明上河图这张纸是不可能变的，变的只是放大镜。

结合到浏览器中，当你用你的小手放大页面时，其实页面并没有变化，只是你的可视窗口通过放大的形式变小了。

以下特意引用MDN原话。

在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。

视口当前可见的部分叫做可视视口（visual viewport）。可视视口可能会比布局视口（layout viewport ）更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了。

有了viewport的基础，再说device-width和initial-scale就相当容易了

所谓width=device-width，这是在定义你放大镜的尺寸，scale是指你放大镜的倍率。看下面的例子：

简单说明下：left是蓝色的160px，right的黄色的160px，body是红色的。这是放大镜一倍率，放大镜大小等同于页面大小时候的展示，为了不打断连贯性，css样式参考备注1，此外调试设备是iPhone5，默认宽度是320px。

接着我们来尝试把放大镜尺寸加大一倍。即：

<meta name="viewport" content="width=640, initial-scale=1">

以上，可视视口增大了一倍，当然我的手机屏幕并不可能真的变大了，但效果仍旧实现出来了，现在可以看到右侧更多的东西。

接着，换个方式，重置下width，但将initial-scale设置为2，也就是放大一倍

<meta name="viewport" content="width=320, initial-scale=2">

以上，放大镜倍率为2倍，所以一屏只能看到屏幕的一半。

最后，这样尝试一下：将上面二者组合起来，首先放大镜只有屏幕的一半（160），然后将倍率调整了2倍。猜猜结果是什么样子？

首先，蓝黄色块肯定会有放大的效果，但由于可视视口仅有160px，屏幕宽度根本放不下两个色块，所以，他们两个不再平行了，而是堆叠在了一起。

讲到这里，有必要总结一下：

• viewport的width和scale是两个维度的放大或缩小。（用多大尺寸的放大镜或多高倍率的放大镜）
• 放大缩小仅仅针对可视视口，布局视口不会发生改变。（清明上河图那张纸不可能被拉伸或压缩）

简单的说，viewport，也就是放大镜，他得配置与要看的东西无关，width和scale是他自己属性

最后，回到开始的问题，我们为什么要设置成这样呢？

<meta name="viewport" content="width=device-width, initial-scale=1">

其实以前，在移动端没这么流行，也就是网页大多是web端的时候，我们的确不加这一句，这样当使用移动端浏览器访问的时候，可视视口会被自动缩放到合适的大小，比如我们看以下的网站没有设置上述标签的时候。

展示效果很不错的…顺带说一句，疫情期间大家戴口罩啊…

但后来移动端成了主流，我们做的很多页面都实现了移动端的兼容，我们不希望缩放，因为可以看到字体显然变小了…所以就必须加上viewport的标签声明，告诉浏览器：“我已经适配了，你不要自行缩放了”。

顺带多说一句，当你告诉浏览器我是一个适配了移动端的网页，此时就不会发生“点透”现象，因为浏览器已经可以确定当前就是在移动端，页面没有缩放，不用等待确认双击缩放事件。更多细节此处就不展开了。

至此想必你对viewport的属性了然于胸，其实就是个放大镜。那么对于viewport标签另外几个属性想必你也知道了：

• maximum-scale： 你家最大放大镜的倍率
• minimum-scale：你家最小放大镜的倍率
• user-scalable: 你家只有一个不能放大的放大镜…（这货也能防止点透，你能想明白么）

看一下全家福

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />

备注1

    body {
      background: red;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .left {
      width: 160px;
      height: 100px;
      background: blue;
      float: left;
    }

    .right {
      width: 160px;
      height: 100px;
      background: yellow;
      float: left;
    }