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

Question

目前致力于响应式设计网站。我使用媒体查询根据宽度和屏幕分辨率针对不同的设备。

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

2. 我想同时检查最小宽度和最大宽度，屏幕分辨率也可能在 97dpi 到 ipad 最大分辨率 264dpi 之间。但这似乎不起作用。如果我为 hp 加载的平板电脑提供单一分辨率 min-width:155dpi，它就可以工作。但最小到最大分辨率条件似乎不起作用。你们能分享一下你们的想法吗。

为此我使用了如下代码

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

Answer 1

resolution 媒体查询 doesn't have good support in webkit browsers yet所以使用 device-pixel-ratio 可能会更成功。

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

因此我们可以使用 resolution 为那些理解它的浏览器(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) {}