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°

谢谢＆amp;问候

Answer 1

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

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

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

所以即使这些设备共享相同的分辨率宽度，三星Galaxy S4也有相同宽度的像素，因此其像素密度更高，媒体查询也不同。

SAMSUNG GALAXY 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)

MOTO G

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

Answer 2

以下是单独定位两个设备的特定媒体查询。 This link 非常有帮助。

三星S4

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

MOTO G

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

Answer 3

我有类似的问题，我使用下面的代码来修复

@media (max-width: 361px) {
/* CSS Classes */
}

webkit-device-pixel-ratio对我不起作用，不知道是什么原因。

另请参阅以下网址以获取更多参考。 http://www.quirksmode.org/css/mediaqueries/mobile.html

尝试使用Media Query定位Moto G和Samsung Galaxy S4

3 个答案: