设备物理像素和设备独立像素

几个概念

设备像素,也称为物理像素,是设备能控制显示的最小单位;
CSS像素,写页面样式时候的像素单位,不是实际存在而是抽象的;
设备独立像素,计算机坐标系中的一个点,是可由程序控制使用的虚拟像素。(也有称设备逻辑像素)

screen对象的width和height属性可以返回显示屏的宽高,这个值其实是设备独立像素而不是屏幕分辨率,设备的屏幕分辨率是无法直接用代码获取的。在pc端看到的往往和分辨率的值一样,因为屏幕物理像素和独立像素的值一样,如果调整到移动设备环境可以看到这个值也是显示的对应设备的独立像素。


设备像素比
物理像素和设备独立像素的比,就是设备像素比(device pixel ratio),可以使用设备像素比对上面两个值进行换算。设备像素比可以通过window.devicePixelRatio获得。
栗:Galaxy S5分辨率是1080x1920(竖)

PPI
PPI,pixel per inch,单位英寸内的像素数量。计算方法:

由于英寸是一个长度单位(=2.54cm),在手机说屏幕多少英寸其实是屏幕对角线的长度,所以可以理解为对角线为1英寸的正方形屏幕里有多少像素。通常PPI的值越高,屏幕就越清晰。

标准PPI为160,在这个值下一个物理像素可以对应一个css像素,就是通常的pc显示器的配置。

移动端meta viewport

通常在写移动端页面的时候会有这么一行代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

viewport包括layout viewport布局视口,visual viewport视觉视口,ideal viewport理想视口。
视觉视口是设备的物理像素;理想视口是设备独立像素,页面不缩放时和css像素相同。设备的ideal viewport大小可以在这里查:viewport sizes

width用来控制layout viewport的宽度,通常有一个默认值,大部分是980px,不同浏览器下也有一些差异,具体值可以通过document.documentElement.clientWidth来获取。如果不写meta viewport,pc页面(没有做响应式处理时)到移动端时,会被调整为缩小到屏幕的大小,内容被压缩,即将内容的宽高展示为设备物理可视区域。如果这个页面宽度小于width,内容部分宽度会展示成width的宽度。

效果相当于把页面放在980px的盒子里,再把盒子压到一个375px的盒子里,内容跟着压缩的比例缩小。
(试了下写min-width和width,如果大于980一个是整体缩放一个是溢出出现滚动条)

meta viewport可以改变这种用户体验,width=device-width会调整视口宽度为设备宽度,让布局视口和理想视口相同,两个盒子大小一致就不出现缩放,让在移动端获得类似pc端的展示效果。

突然就想到多年前设计师出效果图都是640像素,结果领导看了页面觉得字怎么这么小,明明设计图上那么大字!又有好多人不知道为啥手机分辨率都那么高了我们写页面还写320的,直接写640啊...想想也是谜之背锅。

Comments
Write a Comment