覆盖大多数移动设备的CSS媒体查询

时间:2015-03-02 15:08:23

标签: css responsive-design media-queries

是否有任何CSS媒体查询能够检测到大多数智能手机,而不必单独声明每个智能手机?

***我尝试使用only screen规范,但它似乎并没有达到我想要的效果。

1 个答案:

答案 0 :(得分:2)

我认为你可能会从错误的角度接近这个问题。在进行响应式设计时,您不应该关注不同设备的特定屏幕尺寸,您会疯狂地尝试为所有异常进行编码。

只关注各种像素宽度的页面布局。如果设计在320px下看起来很好,那就稍微提高一点。它如何看待480px? 640像素?一对DIV不能正常流动吗?标题字体大小是太大/小吗?图像需要重新调整大小?在这些点上,您可以插入媒体查询来调整页面的布局和设计。

至于为移动设备提供不同的样式表,如果我错了,请纠正我,必须嗅探UserAgent字符串并发送相应的CSS文件。这可以从服务器或客户端完成。根据我的理解,这并不理想,因为随着时间的推移,你不能过分依赖UserAgent字符串中包含的内容。使用此方法可能会为您提供一个布局,该布局旨在显示在子480px宽度屏幕上,但显示在较大的平板电脑上,您可能实际上更喜欢使用桌面布局或设计用于480px到960px范围的布局。

您可以查看自适应设计,但这听起来并不像您正在做的那样。在Adaptive Design中,您可能会检测到用户所在的设备(宽度/类型/等),并将它们一起发送到不同的网页。 同一页面重新布局了布局。一家大型航空公司为他们的移动用户做了这个(不记得谁,KLM?)他们发现,他们的大多数用户在通过手机访问他们的网站时并没有购买门票而是管理他们即将到来/当前的航班 - 办理登机手续,航班状态等。因此他们提供了一个专注于这些功能的网页信息及其桌面网站更适合销售。

就高清晰度屏幕而言,设备像素与CSS像素(又称设备无关像素?)之间存在差异。例如,我的三星Galaxy S4具有1080x1920设备像素,尽管它的CSS像素是360x640。 CSS像素是移动设备上的浏览器将用于呈现页面的内容。虽然这取决于您在视口元标记中设置的内容。这里是我刚才提到的一些内容的链接 - https://developers.google.com/speed/docs/insights/ConfigureViewport。还有这个方便的小网站可以帮助您确定各种像素设置,它们的比率等。http://mydevice.io/