android - 尝试使用媒体查询定位 Moto G 和三星 Galaxy S4

Question

我对媒体查询尝试定位的电话宽度感到困惑。

1. Samsung Galaxy S4  4.99in phone screen width 360px

还有一个

2. Moto G 4.5in phone screen width 360px.

如何分别定位这些手机？ .我尝试了以下代码，但它对手机的影响相似

@media only screen and (max-width : 540px)  and (orientation : portrait) {
/* Styles */


}

@media screen and (device-width: 541px)  and (-webkit-device-pixel-ratio: 3)
{
}

任何人都可以向我澄清这一点。我无法理解的是，这两款手机的屏幕尺寸不同，但它们的 360 度宽度怎么可能相同？？

感谢和问候

Answer 1

不同之处在于每个设备的像素密度。

“像素密度” 是显示器可以适应固定距离的像素数。这与“分辨率”不同，“分辨率”是对设备整个宽度和高度的像素数的简单计数。

如果我们用显示器的物理宽度除以水平显示的像素数，结果就是每英寸的像素数(ppi，通常也称为 dpi)。

因此，即使这些设备共享相同的分辨率宽度，但三星 Galaxy S4 在相同宽度下具有更多像素，因此其像素密度更高，并且它们的媒体查询也不同。

三星盖乐世 S4

@media screen and (max-device-width: 360px) and @media screen and (-webkit-min-device-pixel-ratio: 3) and @media screen and (device-aspect-ratio: 9/16)

摩托G

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)