Nexus 7上的CSS Media Queries,显示分辨率无法在代码中工作

我正在使用CSS Media Queries为不同大小的设备加载不同的模板。 我创build了一个电子表格,其中列出了testing设备的显示分辨率,以及最常见的设备尺寸。 我testing的其中一个设备是Nexus 7,我发现它的显示分辨率是1280×800。但是,当我在代码中使用这些值时,它不起作用。

**我没有使用最大或最小的唯一原因是因为我试图find确切的分辨率。 如果我用max-device-width来replace一些相当大的东西,它会起作用,我已经做了足够的testing,知道它可以处理各种最大值,但为了正确地完成我的代码来区分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"> 

Solutions Collecting From Web of "Nexus 7上的CSS Media Queries,显示分辨率无法在代码中工作"

CSS像素和设备像素的屏幕尺寸有所不同。

在nexus 7的情况下,本地设备像素是1280 x 800像素。

但是,如果这是媒体查询的报告宽度,我们最终将触发传统桌面大小的响应式devise。

因此,许多浏览器都决定在高像素密度显示之前更接近于传统像素大小的CSS像素大小。 相当多的iPhone 1 – 3像素的大小。

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

例如800/600 = 1.3333

为了增加更多的混淆,这些比率有时会在操作系统版本之间变化。 例如,从Jelly Bean 4.2开始,我的nexus 7从603开始报告600px的宽度。

这使得难以针对基于宽度的媒体查询确切的设备。 我build议您接受您正在devise大量设备宽度,并尝试创build一个响应式devise,以适应您select支持的设备尺寸范围。

祝你好运:)

使用下面的视口代码:

 <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空间(至less是开箱即可)。 就好像它正在放大到一定程度,尽pipe缩放偏好设置。

我注意到这个问题,当我的graphics看起来有点模糊。 我通过javascripttesting了窗口大小,发布的数字大约低于预期的25% 。 你会注意到我已经排除了缩放参数,因为它似乎大部分忽略它们。

真正的关键是使用target-densitydpi = device-dpi …这似乎使雨水变得非常正确。

爱与Nexus 7肯定工作!

过于实际的答案,但你基本上可以使用601×880的屏幕大小来定位Nexus 7.不是技术上的完整,但应该足以让你开始,如果你想在你的媒体查询中使用断点。