CSS媒体查询捕获高分辨率手机,但不是低分辨率平板电脑

时间:2012-08-26 17:52:11

标签: css web-applications mobile mobile-website media-queries

我一直在使用min-width: 600px作为我的CSS媒体查询中的断点。我的理由是,600px及以上我会捕获平板电脑设备(Kindle Fire,iPad等),600px以下可以捕获所有手机设备。

事实证明,尽管iPhone的像素增加了一倍,但仍然报告为320px x 480px,但有大量Android手机的分辨率如700px x 1280px。问题是,如何在不给它们提供类似平板电脑的界面的情况下捕获这些设备?

通常情况下,我只是让内容响应设备的像素分辨率,然而,4.3英寸屏幕上的1280px布局看起来不正确,特别是因为我的应用程序处理了很多表单元素,在手机上你想要跨越整个宽度,但在平板电脑或台式机上却没有。

2 个答案:

答案 0 :(得分:2)

一个不错的选择是根据using ems为您的内容定制媒体查询,而不是任意设备像素大小。

答案 1 :(得分:0)

请使用响应式css框架来避免此类问题。我建议使用FoundationTwitter Bootstrap