关于#css#的问题：媒体查询使用方法

Question

css媒体查询使用过程中遇到的问题。
开发过程中适配小屏幕的苹果手机。
iPhoneX 在微信开发者工具中查看到的宽高为 375 * 812 | Dpr:3，iPhone6/7/8 plus的宽高为414 * 736 | Dpr:3，为什么还会用到以下媒体查询代码（以下代码是适配iPhone6/7/8 plus的，iPhoneXR正常）

@media screen and (max-height: 737px){
...
...
}

Answer 1

，Web 开发中的设备宽度和高度并不总是等于设备的物理像素宽度和高度。这是因为现代设备通常有一个设备像素比（Device Pixel Ratio，DPR），它决定了CSS像素和设备物理像素之间的比例。

例如，一个 DPR 为 3 的设备，CSS 像素宽度可能是 375，但是设备的物理像素宽度实际上是 1125（375 * 3）。同理，CSS像素高度可能是 736，但设备的物理像素高度实际上是 2208（736 * 3）