1.什么是设备像素和CSS像素?
1.1设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，你改颜色就可以显示不同的东西呗，只有屏幕一经出厂就固定不会改变。
1.2CSS像素又称为逻辑像素, 是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素。
例如: iPhone3G/iPhone3GS 3.5英寸/ 逻辑像素320*480 / 设备像素320*480
iPhone4/4S 3.5英寸/ 逻辑像素320*480 / 设备像素640*960
也就是说CSS像素和设备像素在有的时候是不一样的
2.设备像素和物理像素when/why不一样
在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素, 所以我们无需关心PC端的CSS像素和设备像素。
在手机端，最开始其实1个CSS个像素也是对应着手机屏幕的1个物理像素,但是乔布斯从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍, 这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素,而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素, 所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些
3.如何解决像素不一致带来的偏差问题
如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响
如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可
但是有时候设备像素可能是CSS像素的1.5/3倍/4倍…
获取设备像素比DPR(Device Pixel Ratio)
DPR = 设备像素 / CSS像素
iPhone3GS : 320 / 320 = 1
iPhone4S: 640 / 320 = 2
iPhone678: 750 / 375 = 2
iPhoneX: 1125 / 375 = 3
在JS中我们可以通过 window.devicePixelRatio 获取当前的设备像素比
如何缩小?
通过 <meta name=“viewport”》的initial-scale属性来缩小
注意点: 缩放视口后视口大小会发生变化，那么物理像素就可以看做是和逻辑像素1:1了
千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。
立即免费在线制作一个APP，新手注册即送开发大礼包
提交app定制需求，免费获取报价和周期：
电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500
手机请点击https://www.qianyuthink.com/?url=/m/customizedservice?uzchannel=500
