css - 在 css 媒体查询中，设备像素比或 DPR 不适用于不同的 DPR 屏幕

Question

不同的 DPR 不适用于媒体查询

尝试使用不同的 DPR。但不工作

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 1.6) {
max-resolution: 1.6dppx;
}

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 2) {
max-resolution: 2dppx;
}

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 3) {
max-resolution: 3dppx;
}

DPR 1 到 1.5 工作正常。但是在 iphone X、iphone 6/7/8 plus 中使用的 DPR 2 和更高的值不起作用。已经为桌面分辨率工作而没有任何问题

标签： css

Answer 1

万岁！！！我得到了答案。无需使用许多 DPR。如果有人需要这样做，请使用最大 DPR 值。例如，i phone x 使用 DPR 值 3，Pixel 2 XL 使用 3.5。然后我使用了 DPR 4。它在一个查询中完成所有事情。谢谢大家的回复。

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 4) { max-resolution: 4dppx; }