android - Nexus 7 上的 CSS 媒体查询，显示分辨率在代码中不起作用

Question

我正在使用 CSS 媒体查询为不同大小的设备加载不同的模板。我创建了一个电子表格，列出了测试设备的显示分辨率和最常见的设备，以得出尺寸限制。我正在测试的设备之一是 Nexus 7，我发现它的显示分辨率为 1280 × 800。但是，当我在我的代码中使用这些值时，它不起作用。

**我没有使用最大值或最小值的唯一原因是因为我试图找到准确的分辨率。如果我用 max-device-width 替换为相当大的东西，它可以工作并且我已经做了足够的测试知道它可以使用给定的各种最大值但为了正确完成我的代码以区分 3 个不同大小的设备类别，我必须确保创建正确的截止值。 CSS分辨率不同吗？提前感谢您提供的所有帮助!

@media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
} 

@media only screen and (device-width:800px) and (orientation:portrait) {

/*style --code removed for sack of space */

}    

这是我的 html 文件中的视口(viewport)代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 1

CSS 像素和设备像素的屏幕尺寸之间存在差异。

对于 nexus 7， native 设备像素为 1280 x 800 像素。

但是，如果这是媒体查询的报告宽度，我们最终会针对传统桌面尺寸触发响应式设计。

因此，许多浏览器选择的 CSS 像素大小更接近高像素密度显示之前的传统像素大小。几乎是 iPhone 1 - 3 像素大小。

设备像素比报告(设备像素/CSS 像素)

例如800/600 = 1.3333

更令人困惑的是，这些比率有时会随着操作系统版本的不同而变化。例如，从 Jelly Bean 4.2 开始，我的 nexus 7 报告纵向宽度为 600px，低于 603。

这使得使用基于宽度的媒体查询很难精确定位设备。我建议接受您正在为大量设备宽度进行设计，并尝试创建响应式设计以适应您选择支持的设备尺寸范围。

祝你好运:)