1、viewport简单说

一般来说,移动上的viewport都是大于浏览器窗口的,不同的设备有自己默认的viewport值(980px或1024px)。

2、三个viewport的理解(layout viewport、visual viewport、idea viewport)

上面说的,默认的viewport即layout viewport:DOM宽度,获取方式:document.documentElement.clientWidth/clientHeight

移动前端viewPort的那些事-LMLPHP

visual viewport代表浏览器的可视区域大小,或者说是屏幕大小,获取方式:window.innerWidth/innerHeight

移动前端viewPort的那些事-LMLPHP

idea viewport:移动设备的理想viewport,无论在何种分辨率下,网页中的内容都能以差不多的大小显示。

3.meta标签控制viewport

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

该代码是让viewport的宽等于设备的宽,并禁止用户缩放。用户缩放不同的网站有不同的选择,但width=device-width是想要的idea viewport效果。

width=device-width:所有的浏览器都支持,但iphone和ipad只支持竖屏;initial-scale=1.0:是相对于idea viewport进行缩放的,两者实现的效果一样,但它在ie下只支持竖屏的宽。所以通常都是两者都写,这样就能完美兼容所有设备了。
当两者设置的宽不一样时,如
<meta name="viewport" content="width=400, initial-scale=1">

width=400表示把当前viewport的宽度设为400px,initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度,当遇到这种情况时,浏览器会取他们中较大的值。

4.关于缩放的问题 initial-scale

一般的浏览器不设置时,默认是layout viewport,iphone和ipad默认是全屏的缩放值

visual viewport宽度 = ideal viewport宽度  / 当前缩放值

假设在iphone中,idea viewport宽为320px,initial-scal=2,此时visual viewport宽会变成160px:放大两倍是指原来的1px现在是2px的效果,在实际宽不变的条件下,原来需要320px填满的现在只需要160px就可以填满了。

05-11 16:12