我正在使用CSS Media Queries为不同大小的设备加载不同的模板。我创建了一个电子表格，列出了测试设备的显示分辨率以及最常见的设备，以提供尺寸截止。我正在测试的其中一个设备是Nexus 7，我发现其显示分辨率为1280×800。但是当我在代码中使用这些值时，它不起作用。
**我使用no max或min的唯一原因是因为我试图找到确切的分辨率。如果我用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">
答案 0 :(得分：13)
CSS像素和设备像素的屏幕尺寸之间存在差异。
对于nexus 7，本机设备像素为1280 x 800像素。
但是，如果这是报告的媒体查询宽度，我们最终会针对传统桌面尺寸触发响应式设计。
因此，许多浏览器都采用了CSS像素大小，这种大小在高像素密度显示之前更接近于传统像素的大小。相当于iPhone 1 - 3像素大小。
设备像素比率报告（设备像素/ CSS像素）
e.g。 800/600 = 1.3333
为了增加更多的混淆，这些比率有时会在OS版本中发生变化。例如，从Jelly Bean 4.2开始，我的nexus 7的纵向宽度为600px，低于603。
这使得难以针对具有基于宽度的媒体查询的确切设备。我建议您接受设计大量设备宽度并尝试创建响应式设计，以适应您选择支持的设备尺寸范围。
祝你好运：）
答案 1 :(得分：3)
使用以下视口代码：
<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一起工作!!!
答案 2 :(得分：2)
过于实用的答案，但您基本上可以使用601x880的屏幕尺寸来定位Nexus 7.技术上不完整，但如果您尝试在媒体查询中使用断点，应该足以让您入门。