为移动平台设置样式的网站。为什么一部手机有两个分辨率？

Question

为什么桌面浏览器对iphone X的分辨率与实际分辨率之间存在差异？

开发者模式(iphone X)：chrome/firefox上的375 x 812

其他网站规格:1125x2436 (http://screensiz.es/iphone-x)

对于web css样式，我应该遵循哪一个？

谢谢。

Answer 1

iphone X的开发者窗口中列出的375 x 812像素是用于设计的。如果你想知道为什么，请阅读下面的内容。

“iPhone 7(或多或少每一款现代智能手机)都有高密度屏幕(苹果称之为视网膜显示屏)，像素比率为2.0，换句话说，两个iPhone7屏幕像素相当于一个CSS像素。三星Galaxy S8+拥有令人惊叹的4.0像素比例，这让它拥有令人印象深刻的1440×2960设备分辨率。顺便说一句，我用十进制记法编写像素比率值，因为除了苹果公司(只使用整数像素比率)之外，其他供应商实现了十进制形式的像素比率，比如微软Lumia 1020的2.4值，或三星Galaxy S的1.5值。“

"CSS像素=设备像素/设备像素比率“

“我们的媒体查询必须引用css像素才能正常工作，因此750和1334分别变成了375和667。如果我们将它们与物理屏幕像素进行比较，CSS像素基本上就是”参考像素“，换句话说就是”虚拟像素“。”

来源：https://medium.com/@flik185/understanding-device-resolution-for-web-design-and-development-3bb4a5183478