此CSS媒体屏幕如何定位分辨率为1080p的电话？

Question

我已经看到以下针对目标手机的CSS媒体查询。是的，它适用于我的手机。但是，我的手机以及其他许多手机的分辨率宽度均为1080px。它是如何工作的？？

@media screen and (max-width: 1024px) { }

Answer 1

每个装置都有实际的像素大小和浏览器的比例。例如，iPhoneX具有1125px和比率3。因此CSS宽度将为375px。

因此屏幕的物理分辨率为[[1125px，您的媒体将为

@media screen and (max-width: 375px) { }

非常好的表，其中设计了分辨率，比率和CSS比例：
https://www.mydevice.io/#compare-devices
尽管您可以在media中确定-webkit-device-pixel-ratio和orientation，像这样
/* iPhone X in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}

关于此的更多信息http://stephen.io/mediaqueries/