<meta> 标签

通常来说，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。不同设备上的浏览器的默认viewport的宽度也不一样。

为了更好的理解和应用viewport，可以把viewport细分一下。分别为（可见viewport，布局viewport，理想viewport）

理想viewport是最适合移动设备的viewport，理想viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为理想viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。理想viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对理想viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

移动设备默认的viewport是布局viewport，但在进行移动设备网站的开发时，我们需要的是理想viewport。所以，我们要利用meta标签对viewport进行控制。关于viewport标签的属性，<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

以下两种方式都可以把当前的viewport宽度设置为理想viewport的宽度：

1. <meta name="viewport" content="width=device-width">
   说明：width=device-width指定了宽度为设备（理想）宽度；

2. <meta name="viewport" content="initial-scale=1">
   说明：initial-scale是相对于理想viewport来进度缩放，所以值为1的时候就是理想viewport的宽度。

但以上两种方式针对某些浏览器的显示有特殊情况，如下图：

动态改变meta viewport标签的两种方法
1.使用document.write来动态输出meta viewport标签；

document.write("<meta name='viewport' content='width=device-width, initial-scale=1.0'>")

2.通过setAttribute来改变 。

<meta id='testViewport' name='viewport' content='width=380'>
<script>
  let app = document.getElementById('testViewport');
  app.setAttribute('content', 'width=480')
</script>