来由

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