移动端viewport解惑

我们在做移动端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概念是一样的。如电脑端的屏幕px宽度，手机的屏幕px宽度。它并不指像英寸，厘米这样的物理尺寸。这些都是手机厂商设的，出厂就设定了。之前一直有误区把device-width和物理尺寸对应起来，所以一直想不明白。

chrome：f12可以看到device-width

         

下面就简单说说下自己对下面代码的理解。

<meta name="viewport" content="width=device-width>

我们电脑上网一般都是全屏查看网页，这个全屏就是电脑的屏幕，电脑浏览器窗口=电脑屏幕区域。即viewport=device-width。但是手机浏览器窗口>手机屏幕区域。

以前手机浏览一些网页都要通过手指调整查看内容的区域。这样用户体验就不好。为了改善这样情况，手机手机厂家就给我想出了解决办法：

name="viewport" content="width=device-width

这个设置意思就指让手机浏览器的窗口等于手机屏幕大小。这样一来在手机上查看就跟我们在电脑上全屏看网页一样啦。

我们做手机端的网页宽度就是根据这个device-width写的。

见：https://www.cnblogs.com/tu-0718/p/9596894.html#undefined

网上看了很多资料，给的概念太多，建议看以下几篇文章就差不多了，不懂得多看多想就通。

https://www.jianshu.com/p/fb982ea8dce3

https://www.jianshu.com/p/bb76c606f0b4

https://www.zhihu.com/question/28082877