常见平板电脑尺寸的CSS媒体查询

Question

我希望有人可以使用几种不同的平板电脑进行测试，或者通过广泛的理论理解可以告诉我，我的常见平板电脑尺寸（取自：http://nmsdvid.com/snippets/）的查询是否有效。

我的主要观点是运营商（特别是针对4种不同设备中的一种）是否正确;

@media only screen and (
    ((min-device-width : 768px) and (max-device-width : 1024px)),
    ((min-device-width : 600px) and (max-device-width : 1024px)),
    ((min-device-width : 800px) and (max-device-width : 1080px)),
    ((min-device-width : 800px) and (max-device-width : 1280px))
) and (orientation : landscape) {

    body{ background-color: pink; }

}

Answer 1

不幸的是，你的问题没有答案。仅仅因为对“普通平板电脑尺寸”这个问题没有答案。你会发现旧的笔记本电脑比目前的平板电脑和平板电脑更窄，分辨率更高的上网本。

调查my database of media features并尽力而为。

那就是说，Lokase的答案是最好的。不要尝试定位设备，尝试使您的网站在所有分辨率中都很好。 并非。

Answer 2

我发现的最佳方法是使用Device Agnostic Responsive Layout方法。

设置范围的媒体查询（即 - 覆盖您所定位的所有平板电脑的尺寸），然后使用流畅的方法将UI扩展或缩小到设备的尺寸。

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

市场上每天都有这么多设备上市，尝试专门针对每个人都是一场失败的战斗。