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

Question

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

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

通常情况下,我只是让内容响应设备的像素分辨率,然而,4.3英寸屏幕上的1280px布局看起来并不合适,特别是因为我的应用处理了大量的表单元素,这些都是在手机上你希望跨越整个宽度,但在平板电脑或台式机上却没有.

Answer 1

一种不错的选择是使用 ems根据您的内容（而不是任意设备像素大小）定制媒体查询。