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

Posted 2023-03-06

【中文标题】尝试使用媒体查询定位 Moto G 和三星 Galaxy S4

【英文标题】：Trying to target Moto G and Samsung Galaxy S4 using Media Query

【发布时间】：2014-10-07 15:55:00

【问题描述】：

我对媒体查询的目标手机宽度感到困惑。

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 宽度？？

感谢和问候

【问题讨论】：

要针对三星 Galaxy S4 使用这个@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

@KheemaPandey 是的，我明白了。但无法定位到 Moto G

我没有找到任何有关 MOTO G 的特定媒体查询。可能您需要进行一些研发。但如果您找到解决方案，请同时发布她。所以寻找相同的人可以得到解决方案。

我为 MOTO G @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) 找到了这个。让我知道这是否有效。

【参考方案1】：

这是分别针对两个设备的特定媒体查询。 This link 很有帮助。

三星 S4

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

MOTO G​​strong>

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

【讨论】：

我尝试了 MoTo G 解决方案，它在 chrome 浏览器上无法正常工作，但链接真的很有帮助，谢谢解释了一切。注意：我在标题<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

中使用了这段代码

你是在模拟器上测试还是在真机上测试？

我现在同时拥有 Moto G 和 S4 设备

如果为 MOTOG 添加 only screen and (min-resolution: 326dpi) 会怎样

让我们尝试一下。并分享您的意见。它真的进行了非常好的对话和良好的学习......

【参考方案2】：

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

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

如果我们将显示器的物理宽度除以水平显示的像素数，结果就是每英寸的像素数（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)

MOTO G​​strong>

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

【讨论】：

我尝试使用 KheemaPandey 提供的相同 Moto G 解决方案，但它不起作用我有两部手机

好的，分辨率可能存在一些小问题。让我看看我能不能解决它:)

如果您在真实设备上进行测试，请尝试添加一些不同的背景颜色，看看它们是否会在这 2 个不同的媒体查询中被触发。还要加一些js看看你的设备宽高是哪个。

我建议您尝试找到摩托罗拉 Moto G 的特定设备纵横比，然后您就可以设置了。这就是您要使这 2 个媒体查询更具体的方法。

是的，我想如果我得到了 Moto G 的纵横比，顺便说一句，我已经为 S$ 设置好了它没问题，它可以与 -webkit-device-pixel-ratio: 2 一起正常工作

【参考方案3】：

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

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

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

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