viewport meta 标签

手机浏览器在渲染网页时，一般会采用一个比手机屏幕更宽的虚拟的窗口（viewport）中渲染页面。这样做的目的主要是解决电脑网页在手机上压缩进一个小屏幕导致难于浏览和使用的问题。手机上Safari引入“viewport元标签“来让web开发者控制视口的尺寸及比例。

 <meta name="viewport" content="
    height = [ pixel_value |device-height] , 
    width = [ pixel_value |device-width ] , 
    initial-scale = float_value , 
    minimum-scale = float_value , 
    maximum-scale = float_value , 
    user-scalable =[yes | no]" />

width 控制viewport的大小，取值可以是具体的像素值，或者device-width 此时viewport的宽度正好适配浏览器宽度，即css网页宽度100%时，宽度正好占满手机浏览器宽度。

height 与 width 相对应。

initial-scale viewport的初始缩放比例。

minimum-scale viewport的最小缩放比例。

maximum-scale viewport的最大缩放比例。

uesr-scalable 是否允许用户手动缩放。

至于viewport还有一个target-densitydpi，这个已经被弃用了(Support for target-densitydpi is removed from WebKit)。

###一个例子###

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

参考
Apple-Specific Meta Tag Keys
w3cplus 此像素非彼像素
移动端webapp开发必备知识
设备像素比devicePixelRatio简单介绍
前端工程师需要明白的「像素」