我们在做移动端webapp的时候需要设置这么一段：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
再配合媒体查询@media就可以写出适配各种手机端的页面了。但是，为什么就能够了呢？
网上查了很多资料，反复看了很多遍还是似懂非，知道看了知乎中一个问题的解答，茅塞顿开。
自己不明白三个个点，其中viewport，width，device-width分别代表什么？
viewport浏览器的窗口，显示网页内容的区域。width指这个viewport即浏览器窗口宽度。
device-width设备的宽度，如电脑端的屏幕宽度，手机的屏幕宽度。这些都是手机厂商设的，出厂就设定了。它的宽度就是我们css常写px概念是一样的。
viewport浏览器的窗口，显示网页内容的区域。width指这个viewport即浏览器窗口宽度。
device-width设备的宽度，如电脑端的屏幕宽度，手机的屏幕宽度。这些都是手机厂商设的，出厂就设定了。它的宽度就是我们css常写px概念是一样的。
chrome：f12 
下面就简单说说下自己的理解。
我们电脑上网一般都是全屏查看网页，这个全屏就是电脑的屏幕，电脑浏览器窗口=电脑屏幕区域。但是手机浏览器窗口>手机屏幕区域。
那么我们手机端浏览不是很不方便了吗？都要通过手指调整查看的区域。
为了改善这样情况，手机手机厂家就给我想出了解决办法：
name="viewport" content="width=device-width
这个设置就是说我让手机浏览器的窗口就等与手机屏幕窗口大小。这样一来在手机上查看就跟我们在电脑上全屏看网页一样啦。
其实自己之前一直有个误区把device-width跟物理尺寸对等起来，像英寸，厘米。所以一直疑惑怎么csspx这种虚拟单位和物理尺寸怎么对等得起来。
原来device-width指的就是我们css的px这样的虚拟单位，这个是手机厂商设置好的。他们怎么设置我就管不到那么远了。
这个device-width设备独立像素，逻辑像素。
网上看了很多资料，给的概念太多，建议看以下几篇文章就差不多了，不懂得多看多想就通。
https://www.jianshu.com/p/fb982ea8dce3
https://www.jianshu.com/p/bb76c606f0b4