3

我希望有几个不同的平板电脑可以测试，或者有广泛的理论理解的人可以告诉我我针对常见平板电脑尺寸的查询（取自： 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; }

}
4

2 回答 2

8

不幸的是，您的问题没有答案。只是因为“常见平板电脑尺寸”这个问题没有答案。您会发现旧的笔记本电脑比当前的平板电脑更窄，而分辨率比上网本更宽的平板电脑。

查看我的媒体功能数据库并尽力做到最好。

也就是说，Lokase 的答案是最好的。不要尝试以设备为目标，尝试使您的网站在所有分辨率下都很好。这并不复杂。

于 2012-11-04T23:25:59.383 回答
4

我发现的最佳方法是使用与设备无关的响应式布局方法。

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

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

每天都有如此多的设备出现在市场上，尝试专门针对每个人是一场失败的战斗。

于 2012-09-06T12:54:54.003 回答