关于viewport

最近无聊的很，买了本教材，学习响应式网站设计。

由于有多年css的编程基础，前面的媒介查询学的很顺利。当学到viewport这个mata标签的时候，教程讲的比较简单。

今天，百度了很多资料，基本搞清楚了这个概念。

一、viewport是针对移动终端而言的，最早由苹果公司提出，这不奇怪，移动终端，那苹果是老大。

二、viewport书写规则通常是这样的<meta name="viewport"  content="width=device-width,initial-scale=1.0,user-scalable=no" />

三、viewport的大致意思就是手机浏览网页时的可见区域。

四、因为网页一般是针对计算机屏幕设计的，宽度一般都在960px以上，手机怎么能放下呢？哪位说了，手机分辨率如今不也老大了么？也有900多。那好吧！

可问题是电脑和手机像素点不同大，对应着放过来，结构和网页的总体面貌当然没变，可是字体呢？图像呢？不知道缩小了多少倍，谁能看得见？哪位又说了，不是能够用两个指头把手机屏幕放大吗？好吧，你又赢了。可你想过没有，此刻，又出现了新问题，讨厌的滚动条出现了，须要左右滑动屏幕才能找见内容。这可不是我想要的结果。

五、此刻，viewport出现了。

先耐住性子，听我讲另外一个概念，否则一下子又糊涂了。什么概念？就是css里常常用到的像素，即px。既然上面说了，电脑屏幕和手机屏幕像素点并不同大，那么，当用手机终端打开网页的时候，px以那个为准哪？用手机打开，固然是以手机的更小的像素点为准了。这就是为何字体变得特别小的缘由。

又回到刚才的问题了。陷入死循环无解了吗？

人类的智慧是谁都没法阻挡的。

其实……，说了半天废话，真正想说的是，手机浏览器理解的px的大小也是电脑屏幕那么大。哪位有谁了，怎么可能呢？我也不知道，可事实好像就是这样，这里的机制我也没搞懂，但其中有一二叫作TdevicePiexRitio的参数很重要。这个参数的意思就是两者的比例。

 

六、听说，viewport还有几个呢。一个叫作layout viewport，还有一个叫作visual viewport，还有一个叫作ideal viewport。layout viewport即网页的原始大小，手机浏览器都有预置值。后来又出现了visual viewport，就是可见的浏览器窗口。  最重要的是这个ideal viewport，它实际上就是divice-width。

七、一旦设置了width为device-width，这时候，initial-scale参数就起做用了，缩放的标准就是device-width，党initial-scale=2的时候，viewport实际尺寸缩小了一半，即倘若device-width为360px，那么，此刻，viewport仅有180px的宽度。也就是说，电脑上制做移动web的时候，只须要设计180px，页面就能够充满手机屏幕了。