媒体查询平板电脑的最小分辨率和最大分辨率 [英] Media queries for tablet min-resolution and max-resolution

问题描述

目前在响应式设计网站上工作。我使用媒体查询根据宽度和屏幕分辨率定位不同的设备。

Currently working on a responsive design website. I use media query for targeting different devices based on the width and screen resolution.

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

1. I have a scenario were i wanted to use the screen resolution to target the devices, but i don't understand how this works.

我想检查最小宽度和最大宽度，屏幕分辨率也可能从97dpi到ipad最大分辨率264dpi。但这似乎不工作。如果我给一个单一的分辨率最小宽度：155dpi的hp加载平板电脑它的工作原理。但最小到最大分辨率条件似乎不工作。

I wanted to check both min-width and max-width, with that the screen resolution may also range from 97dpi to ipad max resolution 264dpi. But this does not seems to work. If i give a single resolution min-width:155dpi for hp loaded tablet it works. But min to max resolution condition seems not working. Could you guys share your idea.

为此，我使用了以下代码

For this i have used like the below code

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

推荐答案

c $ c>解决方案媒体查询在webkit中没有良好的支持浏览器，因此您可以使用 device-pixel-ratio 取得更多成功。

The resolution media query doesn't have good support in webkit browsers yet so you may have more success using device-pixel-ratio instead.

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

因此，我们可以使用解析为那些了解它的浏览器（Firefox，IE9 +，Opera）和 device-pixel-ratio 适用于所有webkit（Chrome，Safari，iOS和Android）：

So we can restate your media query using resolution for those browsers that understand it (Firefox, IE9+, Opera), and device-pixel-ratio for all things webkit (Chrome, Safari, iOS and 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) {}

这篇关于媒体查询平板电脑的最小分辨率和最大分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！