移动前端viewPort的那些事

1、viewport简单说

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

2、三个viewport的理解（layout viewport、visual viewport、idea viewport）

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

 

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

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就可以填满了。