小课堂【武汉】

分享人：龚家豪

1.背景介绍

<meta name="viewport" content="width=device-width">‍‍‍‍‍‍

它的意思是调整layout viewport的宽度与ideal viewport相等。起初它是苹果做的一个扩展，但是与此同时被更多的浏览器所借鉴。

像素

设备像素/物理像素:设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率。

设备独立像素(device independent pixels)：（也可以称为设备无关的逻辑像素）我们平时12调试时（如下图），各种设备上显示的就像素值，

就是以设备独立像素为单位。

CSS像素:是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。

每英寸像素(pixel per inch)：ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。

设备像素比(device pixel ratio)：以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。

ppi与dpr对应列表‍‍

2.知识剖析

viewport:viewport的功能是用来约束你网站中最顶级包含块元素（containing block）html的。

visual viewport:是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页 面的部分，或者

通过缩放来改变visual viewport的大小。无论怎样，CSS布局，尤其是百分比宽度，是以layout viewport

做为参照系来计算的

layout viewport:整个网页的内容区域

       ideal viewport：为了完美适配visual viewport（完美适配指的是，首先不需要用户缩放和横向滚

动条就能正常的查看网站的所有内容；第二，文字的大小是合适。当然,不只是文字，其他元素像图片

什么的也是这个道理。）这个viewport叫做ideal viewport—移动设备的理想viewport。

      ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport（f12可以看到一些常见设备的ideal viewport）。

例如iphone5的ideal viewport宽度是320px。也就是说，在iphone5中，css中的320px就代表iphone屏幕的宽度。

3.常见问题

       为什么要写

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

4.解决方案

           meta:可提供有关页面的元信息，包含“名字 与 数据” 对子

           name: 名字  viewport

           content：内容  这里的width是layout viewport的宽度，device-width是ideal viewport的宽度

‍‍maximum-scale：visual viewport最小放大倍数   initial-scale：visual viewport最大放大倍数   user-scalable：用户能否缩放visual viewport‍

5.编码实战

见视屏

6.扩展思考

动态改变meta viewport标签

               方法1.可以使用document.write来动态输出meta viewport标签，例如：

                       document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

               方法2.通过setAttribute来改变

                       <meta id="testViewport" name="viewport" content="width = 380">

                       <script>

                            var mvp = document.getElementById('testViewport');

                            mvp.setAttribute('content','width=480');

                       </script>

7.参考文献

           一：http://weizhifeng.net/viewports.html

           二：href="http://weizhifeng.net/viewports2.html

8.更多讨论

这里要道个歉：demo时改body和html宽度改的有点问题。demo的证明并不严谨。

‍‍媒体查询中max-width/min-width是根据什么的宽度来判断的？‍‍

回答：根据layout vieport的宽度判断，与visual viewport的宽度，html的宽度，body的宽度都无关。

可以看视屏最后的demo。

感兴趣的话，可以这样写个demo把玩一下：

@media screen and(min-width:600px) {

            main {

                     background-color: #ccc;

                  }

}

以手机屏幕，width=device-width（不会超过600px）的情况下，分别改变body、html的宽度，看看媒体查询会不会生效。

最后再将width=device-width改为width=650px;看看媒体查询会不会生效。

最后结论就是，改变width为650时媒体查询才会生效，也就是媒体查询是长度以layout viewport为基准

BY : 李仁 | 龚家豪</small></p>