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){
...
...
}
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){
...
...
}
,Web 开发中的设备宽度和高度并不总是等于设备的物理像素宽度和高度。这是因为现代设备通常有一个设备像素比(Device Pixel Ratio,DPR),它决定了CSS像素和设备物理像素之间的比例。
例如,一个 DPR 为 3 的设备,CSS 像素宽度可能是 375,但是设备的物理像素宽度实际上是 1125(375 * 3)。同理,CSS像素高度可能是 736,但设备的物理像素高度实际上是 2208(736 * 3)