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

╰+攻爆jí腚メ 2023-01-02 07:27 27阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
上图是一些放大镜，不是打酱油的…

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

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

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

我举个简单的例子：

比如你使用放大镜去看清明上河图  
![在这里插入图片描述][20210105111621730.png]  
原谅我的渣渣绘图，虚线是放大镜，也就是**可视视口**visual viewport，也就是你只能看到这么多。

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

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

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

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

以下特意引用[MDN][]原话。

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

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

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

所谓width=device-width，这是在定义你放大镜的尺寸，scale是指你放大镜的倍率。看下面的例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]  
简单说明下：left是蓝色的160px，right的黄色的160px，body是红色的。这是放大镜一倍率，放大镜大小等同于页面大小时候的展示，为了不打断连贯性，css样式参考备注1，此外调试设备是iPhone5，默认宽度是320px。

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

![在这里插入图片描述][20210105124357435.gif]  
以上，可视视口增大了一倍，当然我的手机屏幕并不可能真的变大了，但效果仍旧实现出来了，现在可以看到右侧更多的东西。

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

![在这里插入图片描述][20210105125045139.gif]  
以上，放大镜倍率为2倍，所以一屏只能看到屏幕的一半。

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

首先，蓝黄色块肯定会有放大的效果，但由于可视视口仅有160px，屏幕宽度根本放不下两个色块，所以，他们两个不再平行了，而是堆叠在了一起。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 2]  
讲到这里，有必要总结一下：

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

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

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

其实以前，在移动端没这么流行，也就是网页大多是web端的时候，我们的确不加这一句，这样当使用移动端浏览器访问的时候，可视视口会被自动缩放到合适的大小，比如我们看以下的网站没有设置上述标签的时候。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 3]  
展示效果很不错的…顺带说一句，疫情期间大家戴口罩啊…

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

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

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

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

看一下全家福

备注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;
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/b520297ad2454376a7a657ef4bb89901.png
[20210105111621730.png]: /images/20221120/e3c8b244a78a4f5789929d4bfc1b5800.png
[MDN]: https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/9d6c46ea615a4aa0836a5aef4ad9053a.png
[20210105124357435.gif]: /images/20221120/b50b1188a6a74964a1664ea1473ddc07.png
[20210105125045139.gif]: /images/20221120/064c2e3893204d38a66c6d354a6d223d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 2]: /images/20221120/34a82e4c18d14a78bfa21e3867c35346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 3]: /images/20221120/b2763b39f7474cbe9a86fbc8f3e63161.png