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

CSS Media Query that Covers Most Mobile Devices

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

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

我认为您可能从错误的角度来看待这个问题。在进行响应式设计时,您不应该关心不同设备的特定屏幕尺寸,您会疯狂地尝试为所有例外情况编写代码。

只关心页面在不同像素宽度下的布局。如果设计在 320 像素下看起来不错,请将其提高一点。它如何看待480px? 640 像素?几个 DIV 是否流动不正常?标题字体大小是否太 big/small?图片需要re-sizing?在这些点上,您可以插入媒体查询来调整页面的布局和设计。

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

您可以查看自适应设计,尽管这听起来不像您正在做的事情。在自适应设计中,您可能会检测到用户使用的设备 (width/type/etc) 并向他们发送一个不同的网页。 与布局 re-tooled 不 同一页面。一家大型航空公司为他们的移动用户这样做(不记得是谁,KLM?)。他们发现他们的大部分用户在通过手机访问他们的网站时并不是在购买机票,而是在管理他们的 upcoming/current 航班 - check-in、航班状态等。因此他们提供了一个专注于这些功能和信息及其桌面站点更适合销售。

就高清屏幕而言,设备像素和 CSS 像素(又名设备独立像素?)之间存在差异。例如,我的 Samsung Galaxy S4 设备像素为 1080x1920,但 CSS 像素为 360x640。 CSS 像素是移动设备上的浏览器用来呈现页面的像素。虽然这将取决于您在视口元标记中设置的内容。 link 关于我刚才提到的一些内容的工作原理 - https://developers.google.com/speed/docs/insights/ConfigureViewport. There's also this handy little site to help you determine the various pixel settings, their ratios etc. - http://mydevice.io/.