当手机网页还没有大部分的应用时候，所以再设计网页显示的时候，只是关注于页面布局在电脑上的显示，此时，设计的网页像素和物理像素相匹配的，但另一方面，手机在打开该网页的时候，就出现了问题，比如：侧边栏设置显示为30%，在手机像素为320px中，意味着该侧边栏只有96px，如果一个字体像素为12px，也只能显示出8个字体，这对于手机用户来说是一件很操蛋的事！！
但是，这种状况被苹果的safari浏览器所终止，苹果在移动版的ios系统中专门为safari定制了一个viewport属性，该属性专门用来优化移动端网页显示效果，
比如：在物理像素320px，也就是说，visual viewport=320px，使用了viewport属性，就会创建一个虚拟的viewport窗口：layout viewport；其中layout viewport=960px;这样，为电脑设计的网页也同样可以在手机端正常的显示，随着发展，又一个问题随之而来：就是有些专门为手机端（移动设备）设计的网页，在使用了viewport属性的浏览器中显示的时候，会出现缩放的情况，因为这个移动设备网页是在虚拟的视图中layout viewport显示的，你想一下：一个设计显示在320px的视图中，而却在960px像素中显示，明显的页面会被缩放，这就需要另一个属性进行设置：user-scalable的属性；
viewport在网页中的设置方法：通过meta属性设置：
<head>
…<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>…</head>
viewport全部属性&值如下：
width: viewport宽度
height: viewport高度initial-scale: 初始缩放比例maximum-scale: 最大缩放比例minimum-scale: 最小缩放比例user-scalable: 是否允许用户缩放
layout viewport的默认值
在Apple实现viewport后，其他浏览器也加入了对viewport meta的支持，但彼此间还是有些差异，差异最大的是layout viewport的表现：Safari iPhone: 980px
Opera: 850pxAndroid WebKit: 800pxIE: 974px
device-width值：
其实这个属性值很有意思，字面意应该是viewport宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于Apple，因为早期iphone的分辨率为320px × 480px，大量为iphone量身定制的网站都设置了viewport:width=device-width，并且按照宽度320px来设计制作，所以其他浏览器加入viewport支持时为了兼容性也将device-width定义为了320px。
注意：
当web移动开发时候，使用media query进行判断的时候，device-width就不能作为判断的样式的条件了，这需要visual viewport参与进来，有关文章总结会在下篇博客进行：参考文章地址
参考文章：