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

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

**我不使用最大值或最小值的唯一原因是我试图找到确切的分辨率。如果我用一个相当大的东西替换为max device width，它可以工作，而且我已经做了足够的测试，知道它可以与给定的各种max值一起工作，但是为了正确地完成代码以区分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">

---

使用以下视口代码：

<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" />

Nexus7的奇怪之处在于（正如jpgr所发布的）它不允许您使用它吹嘘的

1280/800

空间（至少是开箱即用的）。尽管设置了缩放首选项，但它几乎就像是在某种程度上放大运行

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

真正的关键是使用

目标密度dpi=设备dpi

。。。这似乎像下雨一样正确

---

我当然喜欢与Nexus7一起工作

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

在nexus 7的情况下，本机设备像素为1280 x 800像素

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

因此，在高像素密度显示之前，许多浏览器都选择了更接近传统像素大小的CSS像素大小。iphone1-3像素大小

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

e、 g.800/600=1.3333

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

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

---

祝您好运：）

答案过于务实，但您基本上可以使用601x880的屏幕大小来瞄准Nexus7。技术上还不完整，但如果您试图在媒体查询中使用断点，应该足以让您开始

我知道有些设备的“宽度”和“方向”并不总是以合理的方式配对。您是否尝试过将目标锁定在仅限媒体的屏幕和（设备宽度：1280px）以及（方向：纵向）？谢谢您的回复。通过反复试验，我发现设备宽度和设备高度分别为966px和909px。是的，这是一个高DPI设备，因此像素被缩放以保持可读性。在我的nexus 7上，我看到962px x x 553px，状态栏隐藏，系统栏启用。只需注意-target density dpi=设备dpi真的会干扰4英寸960px屏幕。您可以使用javascript检查设备，并使用该标记动态更新您的视口内容，但这是一种痛苦。我也有同样的问题。但是我很困惑，这些视口设置能解决问题吗？上面的视口元代码允许在浏览器中使用已知的1280x800值（设备发布时）。如jpgr所述，如果没有此视口代码，屏幕大小将接近966px和909px。Robbo提到，这可能会导致其他设备出现问题，我只想和Nexus7谈谈。像素不是1:1显示的，因此图形可能会变得有点模糊。请记住，对于媒体查询，您必须使用浏览器中实际显示的值，而不是设备上公布的值。要添加，Chrome上不再支持target densitydpi for AndroidUsing：（最小设备宽度：601px）和（最大设备宽度：880px）对我有用，谢谢！