CSS:仅使用媒体查询定位 Galaxy Tab 3

Question

我只想通过媒体查询定位 galaxy tab 3。根据其分辨率 (1280 x 800)，它应该是:

@media (max-device-width: 800px) and (orientation: portrait) {  
 }

@media (max-device-width: 1280px) and (orientation: landscape) { 
}

问题是某些 iMac 具有相同的分辨率，而我对 Galaxy Tab 3 的修复会影响此设备。有什么办法不影响imac？提前致谢

Answer 1

不幸的是，没有办法进行特定于设备的媒体查询，但有一个解决方案。从实用设计的 Angular 来看，如果 iMac 和 Galaxy Tab 的分辨率相同，那么它们有什么不同呢？他们的新闻部。这是您可以查询的内容!根据http://tablets.findthebest.com/l/232/Samsung-Galaxy-Tab-3-7-0它是 169 ppi。

@media (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi) { }
@media (max-device-width: 1280px) and (orientation: landscape) and (min-resolution: 169dpi) { }

您可能还需要执行 -webkit-min-device-pixel-ratio，但我无法告诉您 Tab 的默认比率是多少(可能是 1.5，但您可以在此处查看:http://bjango.com/articles/min-device-pixel-ratio/)

@media
    (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi),
    (max-device-width: 800px) and (orientation: portrait) and { }
@media
    (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) (min-resolution: 169dpi),
    (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) { }