基于 EM 的媒体查询不适用于 Android 浏览器 v4.3

Posted

技术标签:

【中文标题】基于 EM 的媒体查询不适用于 Android 浏览器 v4.3【英文标题】:EM based media queries not applying on Android browser v4.3 【发布时间】:2014-11-07 13:43:02 【问题描述】:

我的项目在从移动设备(在我的情况下为 android 浏览器 4.3)打开时不应用媒体查询。

为了简化问题并在此处显示,我创建了一个 super simple ONLINE DEMO 仅使用以下代码:

<!doctype html>
<html lang="es">
<head>
      <title>EM TESTER</title>
      <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1,  minimum-scale=1, user-scalable=yes">
   <style>

      bodybackground-color: yellow;

      @media screen and (max-width: 25em) 
         bodybackground-color:red;
   </style>
   </head>
   <body>
      <div style="font-size:300%;">25 EM TESTER</div>
   </body>
</html>

当我从我的手机打开它时,它应该有红色背景,因为它小于 25 em 宽度,但它不应用这个。

这可以在我的 Android 上的 Chrome 上正常运行,但不能在我的 Android 浏览器 4.3 上运行。我已经在近 10 台设备上进行了测试,并且所有设备都可以正常工作(背景颜色为红色),即使在其他设备上也是如此Android 浏览器版本。

这方面有什么已知的错误吗?

如果我使用 PX 而不是 EM 设置媒体查询,它会正确应用。

【问题讨论】:

【参考方案1】:

不同的浏览器/设备有不同的问题,移动浏览器的问题尤其严重。它只是你的手机还是所有的安卓设备?这可能只是一个专门与该浏览器或设备相关的问题。在其他移动浏览器上进行测试,看看哪些浏览器存在问题。缩小范围,然后您可以开始研究更具体的问题。此外,请仔细检查您的移动浏览器屏幕宽度,这有时会让人感到困惑。

【讨论】:

检查其他设备后,我的浏览器似乎是一个f ***king buf:所有移动设备都显示红色背景。我的,黄。我会更新浏览器版本信息 有时您只需要处理一些显示不同内容的浏览器。由于它仅在 android 上与您的特定设备结合使用,这意味着它只占市场的一小部分。我会解决它。为网络设计意味着例外。 我同意,这就是昨天决定的。令人讨厌的是,Android 浏览器不关心更新新功能,只是在网上查一些信息,这个浏览器似乎是当前最糟糕的浏览器(即使是寡妇手机浏览器也更好......)。他们为什么不在所有 Android 设备上预安装 Chrome 而不是这个糟糕的东西?好吧,谢谢你shadw 我用 chrome,一切都很好 我也是,但很多 Android 用户甚至不知道有移动 Chrome 版本。他们看到 Internet 图标,这是他们独特的导航应用程序,所以我担心无法为他们提供此功能。但是经过测试,在较新和较旧的 Android 浏览器版本上都可以正常工作,所以这一定是我的手机/型号/任何东西的特定问题

以上是关于基于 EM 的媒体查询不适用于 Android 浏览器 v4.3的主要内容,如果未能解决你的问题,请参考以下文章

基于 Em 的 CSS 媒体查询在 Ios Mobile Safari 上显示比预期更小的分辨率

媒体查询不适用于横向

媒体查询不适用于 Wordpress

媒体查询不适用于移动设备

媒体查询不适用于任何 iphone

媒体查询不适用于 Firefox