简单来说< meta name=”viewport” content=”width=device-width,initial-scale=1.0” >的解释

content属性值:

width:可视区域的宽度，值可为数字或关键词device-width
height: layout viewport 的高度，这个属性对我们并不重要，很少使用
intial-scale: 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

可视区域的缩放级别:

maximum-scale=1.0, 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale=1.0; 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放、yes允许。

复杂的说：

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

一、 viewport的概念

通俗讲: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
具体讲: 就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。
viewport不一定要和可视区一样大，可以比浏览器的可视区域要大，也可以比浏览器的可视区域要小。
默认情况: 是比可视区要大的，因为考虑到桌面浏览器上的网站也能在移动端上正常显示，移动端一般会默认设置视口为980px和1024px(这个由设备自己决定),但带来的后果是出现横向滚动条。
ps: 一般来说移动端的分辨率是比pc端的分辨率要小的。
下图是默认viewport的宽度: