RWD:viewport笔记

来由

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;}
}