CSS媒体查询在Nexus 7，显示分辨率不工作在code [英] CSS Media Queries on Nexus 7, display resolution not working in code

问题描述

我的CSS媒体查询工作负载不同的模板，不同尺寸的设备。我列出的测试设备和最常见的设备的显示分辨率拿出大小临界值创建为preadsheet。一说我测试的设备是我已经找到了显示分辨率为1280×800。然而，当我在code使用这些值了Nexus 7，这是行不通的。

**我使用的是没有最大或最小是因为我试图找到确切分辨率的唯一原因。如果我更换，最大设备宽度的东西相当大，它的工作原理，我已经做了足够的测试就知道它的工作原理与给定不同的最大值，但是为了正确地完成我的code至3 differently-区分大小的设备类，我必须确保我创造合适的临界值。是CSS解析不同？感谢您的任何和所有帮助提前！

  @media只有屏幕（设备宽度：1280px）和（方向：横向）{
/ *风格 -  code删除了空间麻袋* /
}

@media只有屏幕和（设备宽度：800px）和（方向：纵向）{

/ *风格 -  code删除了空间麻袋* /

}
 

下面是我的视code。在我的html文件

 ＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模为1，最大规模= 1＆GT;
 

解决方案

有一个在CSS像素和设备像素的屏幕尺寸之间的差异。

在关系7的情况下，原装置的像素是1280×800像素。

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

其结果是，许多浏览器解决在该高像素密度显示器之前更类似于传统的像素的大小一个CSS像素大小。 pretty的很多iPhone 1 - 3像素大小

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

例如。 800/600时= 1.3333

要添加更多的混乱，这些比率有时跨操作系统的发布改变。例如，果冻豆4.2我承上启下7报告的肖像600px的宽度，从603下来。对

这使得它很难瞄准宽度根据媒体查询详细的设备。我建议接受，你正在设计一个巨大的设备宽度的数量，并尝试创建一个响应式设计该设备的大小，你选择支持的范围之间的适应。

祝您好运：）

I'm working with CSS Media Queries to load different templates for differently sized devices. I created a spreadsheet listing the display resolution of testing devices and the most common devices to come up with the size cut-offs. One of the devices that I'm testing is the Nexus 7 of which I've found the display resolution to be 1280 × 800. However when I use these values in my code, it doesn't work.

**the only reason I'm using no max or min is because I'm trying to find the exact resolution. If I replace with max-device-width with something rather large, it works and I've done enough testing to know that it works with various max values given but in order to properly complete my code to differentiate between 3 differently-sized device categories, I have to make sure I'm creating the right cut-offs. Is CSS resolution different? Thanks for any and all help in advance!

@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 */

}    

Here is my viewport code in my html file

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

解决方案

There is a difference between screen dimensions in CSS pixels and device pixels.

In the case of the nexus 7, the native device pixels are 1280 x 800 pixels.

However, if this was the reported width for media queries we'd end up with responsive designs being triggered for traditional desktop sizes.

As a result, many browsers settle on a CSS pixel size that more closely resembles the size of traditional pixels before high pixel density displays. Pretty much iPhone 1 - 3 pixel size.

The device-pixel-ratio reports (device pixels / CSS pixels)

e.g. 800 / 600 = 1.3333

To add even more confusion, these ratios sometimes change across OS releases. For example, as of Jelly Bean 4.2 my nexus 7 reports a width of 600px in portrait, down from 603.

This makes it difficult to target exact devices with width based media queries. I recommend accepting that you're designing for a huge number of device widths and attempt to create a responsive design that adapts between the range of device sizes that you choose to support.

Best of luck :)

这篇关于CSS媒体查询在Nexus 7，显示分辨率不工作在code的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！