二、视口

2.1 视口的意思

用JavaScript语句：

document.documentElement.clientWidth;

可以轻松输出，当前浏览器宽度
 
iPhone认为自己的屏幕宽度是980px。
 
980px是什么呢？是iPhone的分辨率么？不是！ 实际上就是苹果公司，人为制定的一个参数，
“视口”。
 
苹果的设计人员人为，苹果手机如果自己认为自己是980px像素的话，那么将能够更好的再手机中显示PC网站，因为绝大多数世界上的网站的版心，都是980px左右。
简单的说，在浏览网页的时候，苹果手机认为自己是980px宽的。
 
苹果手机，明明屏幕那么小，凭什么自己980px宽呢？？！！！
各大手机厂商，开始运行程序员设置手机自己的视口。我们可以规范手机的视口不是默认的那个值。
 

2.2 约束视口

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

 
一个name属性和id属性都是viewport (视口)的meta标签，就是约束视口标签。
我们通过content属性，来进行视口限制。
 

width=device-width,  → 设置这个视口的宽度，变为设备的宽度（苹果变为了320） initial-scale=1.0,    → 设置视口的初始的缩放倍数为1.0倍 minimum-scale=1.0,   → 设置视口的最小的缩放倍数为1.0倍 maximum-scale=1.0,  →  设置视口的最大的缩放倍数为1.0倍 user-scalable=no   → 设置视口不可以被用户缩放

实际上，苹果的设备宽度也不是320px，这里的320px，到底是怎么出现的呢？实际上这叫做设备的“像素密度无关尺寸”。
苹果设备，在约束视口之后的宽度就是320px。
 
制作手机网页的时候，一定要约束视口！！否则响应式失效。
 
我们还要熟知一些常见设备在约束视口之后，的尺寸：
iPhone(3及以后版本): 竖向320px  横向568px
iPad： 竖向768px  横向1024px
iPad mini：竖向768px  横向1024px
三星Note3： 540px
三星 Galaxy S系列的：360px;
 
只能手机的视口（约束之后），一般都是320~360px之间。
各种pad在约束视口之后，都是620~768之间。
 
上面的数据非常有意义！！
可以为我们的CSS媒体查询的突变点，提供理论参考。
 
● 当用户设备宽度大于980的时候，用PC界面；
● 当用户设备宽度在620~979之间，用Pad界面；
● 当用户设备宽度小于619的时候，用手机界面。
 
也就是说，响应式布局，不是什么新的技术，而是原有的一些技术的组合：流式布局（用百分比写width、padding、margin）、媒体查询（让css能够根据浏览器宽度来选择是否被使用）

本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：http://www.itcast.cn/ui