Nexus 7上的CSS媒体查询,显示分辨率无法在代码中使用

Question

我正在使用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">

Answer 1

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

在nexus 7的情况下,本机设备像素是1280×800像素.

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

结果,许多浏览器采用CSS像素大小,在高像素密度显示之前更接近传统像素的大小.相当于iPhone 1 - 3像素大小.

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

例如800/600 = 1.3333

为了增加更多的混淆,这些比率有时会在OS版本中发生变化.例如,从Jelly Bean 4.2开始,我的nexus 7的纵向宽度为600px,低于603.

这使得难以针对具有基于宽度的媒体查询的确切设备.我建议接受您正在设计大量设备宽度,并尝试创建一个响应式设计,以适应您选择支持的设备大小范围.

祝你好运:)

Answer 2

使用以下视口代码：

<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 一起工作！