我们在做移动端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