来由
Apple为了让网页在iphone上显示而设计的meta tag。尚未列入W3C标准但已得到主流浏览器支持。
示例
<meta name="viewport" content="width=device-width, initial-scale=1">含义
visual viewport指的是浏览器可视区域，这里的宽高可以通过window.visualViewport查询，但不总是等于window.innerHeight和window.innerWidth，因为存在device pixel ratio（设备像素比）。
layout viewport指整个网页区域，包括可视区域外的网页内容。
比如retina屏幕上的像素比是2，那么对css来说，渲染宽度/高度只有物理宽度/高度的一半，四个物理像素对应一个渲染像素。
属性
width
设置layout viewport的宽度，可以取device-width或具体像素值，默认值等于980。
height
设置layout viewport的高度，可以取device-width或具体像素值，默认值与aspect ratio（纵横比）有关。
user-scalable
规定用户能否缩放网页，可以取yes/no，分别对应user-zoom的zoom和fixed。如果用数字赋值，zoom对应[-1,1]，fixed对应实数集的余下部分。
initial-scale
设置页面初始缩放比率，可以取小数，默认值fit to screen。
minimum-scale
规定最小缩放比率，可以取小数，默认值0.25。
maximum-scale
规定最大缩放比率，可以取小数，默认值1.6。
CSS media query breakpoint
由viewport划定了渲染像素后，CSS媒体查询断点才能工作正常。以下样式表仅对渲染宽度小于等于720的设备有效。
@media screen and (max-width: 720px){
body { background: grey;}
}