响应式web设计笔记(2) viewport
什么是viewport
一句话介绍：viewport就是你在pc，手机等终端屏幕上查看的页面的大小。
在响应式设计中用到的media query技术就是基于viewport的宽度来实现的。
- 在PC上，打开浏览器窗口，干掉菜单栏，工具条，滚动条等剩下的就是所谓的
viewport。 - 在手机浏览器上，如果没有设置
viewport的话，默认显示跟pc上的浏览器是一样的，会缩小页面显示内容以适配移动端的页面大小。
大部分移动端的浏览器将会以默认980像素的宽度渲染页面。 - 一般来说，响应式设计的
viewport设置如下：1
<meta name="viewport" content="width=device-width,initial-scale=1">
下面是viewport的一些常用属性
viewport属性
width
width=device-width告诉浏览器全屏渲染页面，浏览器将以终端屏幕的实际宽度（100%）来渲染页面
如果没指定viewport，移动终端会以默认的980像素的设置来渲染页面，如果你的移动设备是320像素，那么会缩放大约1/3比例来显示980像素应该显示的内容。
设置了width=device-width，那么当横屏的时候，渲染的宽度会自动适配——将变宽来适应你的屏幕大小。例如在320*480的屏幕上，横屏，那么宽度会适配为480.
initial-scale
initial-scale属性会告诉浏览器在页面首次加载的时候如何缩放页面，也就是常说的缩放因子.initial-scale=1意思是页面将以width属性的大小来渲染页面，不会缩放。如果这个值设置为大于1，例如2，那么页面将会放大到原来的两倍。你看到的页面会是一半。
user-scalable
移动设备运行用户对页面进行缩放。如果设置为user-scalable=no，将不允许用户对页面缩放操作
然而不建议设置为no，虽说响应式的网站总能以全屏的风格显示网站，但也应该允许用户缩放，万一有一些需求：比如想放大看某些局部内容，或者老人看字不太方便想放大的时候。
maximun-scale
可以使用maximum-scale来设置缩放的最大级别。maximum-scale=2意味着允许用户最多放大到页面的两倍。
设置maximum-scale=1将不允许用户缩放，跟user-scalable=1效果没什么区别，跟上面同理不应该设置为1.
