平板电脑最小分辨率和最大分辨率的媒体查询

Question

目前正在开发响应式设计网站。我使用媒体查询来根据设备的宽度和屏幕分辨率进行定位。

1. 我有一个场景，想要使用屏幕分辨率来定位设备，但我不知道这是如何工作的。

2. 我想检查最小宽度和最大宽度，这样屏幕分辨率也可以从97dpi到ipad的最大分辨率264dpi。但这似乎不起作用。如果我给出单个分辨率min-width：155dpi适用于hp加载的平板电脑，则可以使用。但min到max分辨率条件似乎不起作用。您能分享一下您的想法吗？

为此，我使用了以下代码：

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

- PCA

Answer 1

分辨率 媒体查询在webkit浏览器中尚未得到良好的支持, 因此您可能更成功地使用 device-pixel-ratio。

http://bjango.com/articles/min-device-pixel-ratio/

因此，我们可以使用分辨率来重申您的媒体查询，对于那些理解它的浏览器（Firefox，IE9+，Opera），以及使用device-pixel-ratio来适用于所有Webkit浏览器（Chrome，Safari，iOS和Android）：

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px),
       only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {}

- thefrontender

---

我认为（您写这篇文章一年后），现在是一个很好的时机进行转换（自Chrome 29以来，我们现在已经升级至34，而自Firefox 16以来，当前版本为29）。此外，Chrome正在鼓励人们在控制台消息中从dpi切换到dppx。避免使用webkit前缀也很好，并且使用媒体查询编写逻辑OR语句有些棘手（虽然“or”由逗号表示，但在我的经验中，您不能轻松地将“and”和“or”组合在单个语句中）。 - William Turrell

编辑：说得太早了 - 对于移动设备，支持“分辨率”仍然非常糟糕，不幸的是... :( - William Turrell

Answer 2

根据 Quircksmode 的旧测量http://quirksmode.org/tablets.html

@media screen and (min-width: 37em) {
}

然而，我猜对于较新的平板电脑来说，这并不是最好的选择，因为我的手机有37em或更多。

那么呢：

@media screen and (min-width: 42em) {
}

- Mladen Adamovic

Answer 3

这些 MQ 将处理 Windows8.1 模拟器中的预设设置：

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768),
  screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768),
  screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080),
  screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) {
  body {
    background-color: red !important;
  }
}

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200),
  screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080),
  screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) {
  body {
    background-color: violet !important;
  }
}

@media screen and (max-resolution:  174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440)  {
  body {
    background-color: purple !important;
  }
}

- Aleksandr Gembinski