加和不加meta的viewport有什么区别

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【 加和不加meta的viewport有什么区别】

1.背景介绍

 

 什么是 Viewport?

 viewport 翻译为中文可以叫做"视区"。 viewport 是用户网页的可视区域。 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点， 就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。所以我们利用meta标签对viewport进行控制，以达到我们想要的效果。

2.知识剖析

 在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的 viewport的宽度要小的。

3.常见问题

怎么利用meta标签对viewport进行控制？

4.解决方案

 

 我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

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

5.编码实战

6.扩展思考：meta viewport 的属性和值

 

width :设置layout viewport 的宽度，为一个正整数，或字符串"width-device"

initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale :允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale :允许用户的最大缩放值，为一个数字，可以带小数

height: 设置layout viewport 的高度，这个属性对我们并不重要，很少使用

user-scalable: 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。 

7.参考文献

baidu

8.更多讨论

非响应式设计中怎样使用ViewPort meta标签