HTML：理解viewport（视口）
移动端的网页开发趋势正在不断上升，但由于手持设备的屏幕通常都比较小，那么怎样在一个相对较小的屏幕上更好的展示网页内容呢？我们就来深入了解一下viewport这个html中的meta标签。
通常来说，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。不同设备上的浏览器的默认viewport的宽度也不一样。如下图：
为了更好的理解和应用viewport，可以把viewport细分一下。分别为（可见viewport，布局viewport，理想viewport），如下图：
理想viewport是最适合移动设备的viewport，理想viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为理想viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。理想viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对理想viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。如下图是在iPhone6上显示的效果：
移动设备默认的viewport是布局viewport，但在进行移动设备网站的开发时，我们需要的是理想viewport。所以，我们要利用meta标签对viewport进行控制。关于viewport标签的属性，如下图所示：
以下两种方式都可以把当前的viewport宽度设置为理想viewport的宽度：
1.
说明：width=device-width指定了宽度为设备（理想）宽度；
2.
说明：initial-scale是相对于理想viewport来进度缩放，所以值为1的时候就是理想viewport的宽度。
但以上两种方式针对某些浏览器的显示有特殊情况，如下图：
动态改变meta viewport标签的两种方法
1.使用document.write来动态输出meta viewport标签；
2.通过setAttribute来改变 。
代码如下图：
下图是使用viewport标签和没用使用时的效果差别，请参考：
版权声明：本站【趣百科】文章素材来源于网络或者用户投稿，未经许可不得用于商用，如转载保留本文链接：https://www.qubaik.com/life/191206.html
