前端开发教程：设备像素和CSS像素

1.什么是设备像素和CSS像素？

1.1设备像素，也称为物理像素，是“物理屏幕”。您可以更改颜色以显示不同的内容。只有屏幕在出厂时才固定。

1.2 CSS像素，也称为逻辑像素，是编程世界中的虚拟对象。我们通过代码设置的像素都是逻辑像素。

例如：iPhone 3G/iPhone 3GS 3.5英寸/逻辑像素320*480/设备像素320*480

 nbsp； ；iPhone4/4Snbsp； ； ；3.5英寸/逻辑像素320*480/设备像素640*960nbsp； ； ； ； ；

也就是说，CSS像素和设备像素有时不同nbsp； ； ； ； ； ； ；

2.当/为什么设备像素与物理像素不同

在PC端，CSS像素通常是与计算机屏幕相对应的物理像素，因此我们不需要关心PC端的CSS像素和设备像素。

在手机端，最初CSS像素也是与手机屏幕相对应的物理像素。但乔布斯从iPhone4开始，苹果推出了所谓的视网膜视网膜屏幕。iPhone 4的屏幕大小没有改变，但像素数量增加了一倍，这导致在一个CSS像素等于一个物理像素的手机上，我们设置一个CSS象素只占一个物理象素，而在一个CSS像素不等于一个实体像素的手机中，我们设置了一个CSS象素只占两个物理象素，你会发现它也是1像素，但在带有视网膜视网膜屏幕的手机上它更厚

3.如何解决像素不一致导致的偏差问题

如果设备像素与CSS像素相同，则在不进行处理的情况下不会产生负面影响

如果设备像素是CSS像素的两倍，我们只需要将CSS像素减少一半

但有时设备像素可能是CSS像素的1.5/3/4倍

获取DPR（设备像素比率）

DPR=设备像素/CSS像素

iPhone3GS:320/320=1

iPhone4S：640/320=2

iPhone 678:750/375=2

iPhoneX:1125/375=3

在JS中，我们可以使用窗口DevicePixelRatio获取当前设备像素比率

如何减少？

通过

注意：缩放视口后，视口大小将发生变化，因此物理像素可以与逻辑像素视为1:1

统软云是一家专业和服务提供商，提供一站式移动应用解决方案，以满足您的各种需求。欢迎评估您的需求并免费获取报价。

，注册后为新手提供免费开发包