看了许多关于设备像素、视口的博客,有一部分内容写的不是很清楚,而且每篇博客的知识点的讲述也有些差异,看了许多都快把自己弄懵了,都不知道怎么理解才好,下面是我的总结。
设备像素
对于设备来说,有两个设备像素:物理像素、独立像素。
物理像素
指的是设备屏幕的物理像素,任何设备的物理像素数量都是固定的。
屏幕分辨率的意思是,设备屏幕上的物理像素个数。
比如iPhone 6 的屏幕分辨率为750像素*1334像素,表示在宽度上,有750个像素点,高度上有1334个像素点。
看看下面这组数据:
手机类型 | 屏幕尺寸 | 分辨率 |
---|---|---|
Huawei P8 | 5.2英寸 | 1080*1920 |
Apple iPhone 6+ | 5.5英寸 | 1080*1920 |
不同英寸大小的设备上,其分辨率怎么会相等呢?
在同一个设备上,一个物理像素所代表的物理长度是固定不变的;
在不同设备之间,一个物理像素所代表的物理长度是可以不同的;
JavaScript获取屏幕的物理像素尺寸
window.screen.width;
win