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

标签 android css media-queries

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

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 度宽度怎么可能相同??

感谢和问候

最佳答案

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

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

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

关于android - 尝试使用媒体查询定位 Moto G 和三星 Galaxy S4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25300567/

相关文章:

android - 使用 Android 插件获取 gradle 项目的类路径

java - 将 channel 向上/向下按钮与 Android TV 应用程序链接

android - ActiveAndroid 添加列并检查是否存在

css - 媒体查询到 Zurb Foundation 4 的中心图像

android - 在 RecyclerView 适配器中设置自定义字体

javascript - polymer 1.x : Obtaining customStyles property value

javascript - Bootstrap span6 无法正常工作

css - Outlook 中的表格宽度与网络浏览器中的表格宽度不同

html - 部分元素不调整/保持格式以适应不同的屏幕尺寸?

html - 图像和媒体查询