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 文件中的视口代码

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

Answer 1

使用以下视口代码：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

或者这个不允许缩放：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />

关于 Nexus 7 的奇怪之处在于（正如 jpgr 发布的那样）它不允许您使用它所拥有的 1280/800 空间（至少开箱即用）。尽管设置了缩放首选项，但它几乎就像在某种程度上放大了一样。

当我的图形看起来有点模糊时，我注意到了这个问题。我通过 javascript 测试了窗口大小，它发布的数字约为25%，低于预期。你会注意到我已经排除了缩放参数，因为它似乎在很大程度上忽略了它们。

真正的关键是使用target-densitydpi = device-dpi...这似乎非常正确。

肯定喜欢使用 Nexus 7 ！！！

Answer 2

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

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

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

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

设备像素比率报告（设备像素/CSS 像素）

例如800 / 600 = 1.3333

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

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

祝你好运:)

Answer 3

过于务实的答案，但您基本上可以使用 601x880 的屏幕尺寸来定位 Nexus 7。技术上不完整，但如果您尝试在媒体查询中使用断点，应该足以让您入门。