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

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

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

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

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

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

4、由于网页通常是针对计算机屏幕设计的，宽度通常都在960px以上，手机怎么能放下呢？哪位说了，手机分辨率现在不也老大了么？也有900多。那好吧！

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

5、此刻，viewport出现了。

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

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

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

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

 

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

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