meta标签中的viewport

viewport是什么

viewport是一个区域，分为layout viewport与visual viewport

• layout viewport为页面用来渲染的区域，是页面真实所在位置
• visual viewport为视口区域，即手机浏览器可视区域，仅控制缩放相关

举个简单的例子来说的话，当我们用放大镜看报纸上的内容时，放大镜可以在报纸上方移动并且控制缩放倍数，layout viewport即为报纸，而visual viewport即为放大镜

为什么会存在viewport

当pc页面或者说大的页面放在移动端显示时，如果直接将页面渲染在手机浏览器上会导致页面的排版布局等出现问题，因此需要将大的页面渲染在一个相对较大的区域(layout viewport)，然后通过另一个visual viewport来显示layout viewport中的内容。

手机浏览器的作用

• 将页面渲染在layout viewport
• 将layout viewport缩放

当visual viewport局域小于layout viewport时缩放后页面很小很难操作，影响用户体验，因此一般在开发移动页面时会将两者宽度调整为一致，报纸的大小刚好等于放大镜的大小，这样浏览器缩放前与缩放后是一样的，就不会出现

标签中的viewport

viewport的设置方式如下所示

 <meta name="viewport" content="name=value,name=value">
- width: 设置layout viewport特定值(一般使用device-width)
- initial-sacle: 设置页面初始缩放
- minimum-scale: 最小缩放
- maximum-scale: 最大缩放
- user-scalable: 用户能否缩放

最佳实践

<mate name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">