移动端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