手机屏幕自适应之 viewport

[XiZev]

手机浏览器渲染网页的过程

• 渲染：将整个页面渲染在一个layout viewport蓝色区域，以保证页面排版正确。
• 缩放：将整个layout viewport缩放到visual viewport黄色区域大小，以保证页面在手机屏幕上被完整显示出来。

meta标签控制viewport

移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。

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

• width：这里的width设置的是layout viewport，device-width为设备的宽度，也就是我们心中的ideal viewport大小，所以width=device-width的意思是将layout viewpport设置为ideal viewport的宽度。
• initial-scale：指定页面的初始缩放比例。比例为ideal viewport/layout viewport，当比例为1时，两者相等。
• maxinum-scale：允许用户对页面的最大缩放比例。
• mininum-scale：允许用户对页面的最小缩放比例。
• user-scalable：是否允许用户对页面进行手动缩放。

width和initial-scale效果一样，为什么要用2个相同功能的规则？

width=device-width在IPhone和IPad上存在兼容问题； initial-scale=1.0在IE上存在兼容问题