2

所以我刚刚发现大部分旧的移动浏览器不支持媒体查询。(来源:实现响应式设计的书)。例如,书中说 92% 的 Android 用户正在使用 Android v2.3 或更早版本进行浏览。当前版本是 v4.x。

所以我很好奇如何针对这些用户进行优化。假设我把它<meta name=”viewport” content=”width=device-width” />放在头上,因为那些浏览器不理解以下媒体查询,他们不会只显示“桌面”布局的一小部分(比如默认 960 像素布局的 200 像素吗?)..

所以我想知道如果设备不支持媒体查询,是否会删除视口元标记,这样他们至少可以在那些旧浏览器中拥有默认的桌面体验,有什么建议吗?谢谢。

4

1 回答 1

2

您的书已过时,请在此处查看此图表以获取更多最新信息。

总结一下,尽管 5.5% 的 android 用户使用低于 2.3 的内容进行浏览(如果算上 2.3 的第一个补丁,则为 5.6%)。

在 2.3 的补丁之后,这些手机上的浏览器确实相当不错,我会瞄准它及更高版本,因为这将覆盖 94.4% 的所有 Android 手机用户。

此外,如果您在此处查看此图表,您将看到对实际 css 媒体查询的支持一直追溯到 android 浏览器 2.1。(这意味着 99.9% 的安卓用户可以看到基本的媒体查询)

此外,如果您查看这些报告:

您会看到至少回到 2.2,您指定的元标记<meta name=”viewport” content=”width=device-width” />是受支持的(我假设由于 2.1 支持媒体查询,元标记也是如此,即使它不是,您仍然覆盖 98.2% 的用户)。

如果您真的想努力完成最后几个百分点的工作,您可以使用一些 javascript 来检测是否支持媒体查询。就我个人而言,我会检查像modernizer这样的图书馆。如果你选择走那条路,它会让你的生活变得更简单。

于 2013-05-30T21:20:46.750 回答