关于HTML5中meta name="viewport" 的用法
移动端的布局不一样于pc端，首先咱们要知道在移动端中，css中的1px并不等于物理上的1px，由于手机屏幕的分辨率已经愈来愈高，高像素可是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。javascript
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就能够看作是设备的独立像素，因此经过devicePixelRatio，咱们能够知道该设备上一个css像素表明多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素至关于2个物理像素。可是要注意的是，devicePixelRatio在不一样的浏览器中还存在些许的兼容性问题，因此咱们如今还并不能彻底信赖这个东西。css
还有一个因素也会引发css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所表明的物理像素也会增长一倍；反之把页面缩小一倍，css中1px所表明的物理像素也会减小一倍。java
因此在作移动端开发时，为了使移动端的页面在不一样的手机上一样的大小来显示，咱们能够将页面的宽度固定，而后获取设备的宽度，能够获得咱们以前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不容许用户再从新缩放。web
在看viewport的具体用法以前，咱们先搞清楚几个概念。浏览器
layout viewport：iphone
- layout viewport 是网页的全部内容，他能够所有或者部分展现给用户。
visual viewportsvg
- visual viewport 就是当前显示给用户内容的窗口，你能够拖动或者放大缩小网页。
不太懂的看下图就知道了：布局
viewport具体用法为:
使用该meta标签时，在content中写属性，用逗号隔开ui
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
| 属性名 | 备注 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度 |
| initial-scale | 设置页面的初始缩放值，为一个数字，能够带小数 |
| minimum-scale | 容许用户的最小缩放值，为一个数字，能够带小数 |
| maximum-scale | 容许用户的最大缩放值，为一个数字，能够带小数 |
| height | 设置layout viewport 的高度，这个属性对咱们并不重要，不多使用 |
| user-scalable | 是否容许用户进行缩放，值为”no”或”yes”, no 表明不容许，yes表明容许 |
| – | – |
| target-densitydpi | 值能够为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个 |
最后一个属性为安卓特有，而且安卓已经决定要废弃target-densitydpi 这个属性了，因此这个属性咱们要避免进行使用 。spa
下面咱们来看看移动端布局具体的代码：
<head>
<title>Test Page</title>
<script> var deviceWidth = parseInt(window.screen.width); //获取当前设备的屏幕宽度 var deviceScale = deviceWidth / 640; //获得当前设备屏幕与640之间的比例，以后咱们就能够将网页宽度固定为640px var ua = navigator.userAgent; //获取当前设备类型（安卓或苹果） if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { document.write('<meta name="viewport" content="width=640,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">'); } else { document.write('<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />'); } } else { document.write('<meta name="viewport" content="width=640, user-scalable=no">'); } </script>
</head>