简体   繁体   English

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

[英]EM based media queries not applying on Android browser v4.3

I am on a project that, when opened from a mobile device (in my case Android Browser 4.3), does not apply media queries. 我在一个项目中,该项目从移动设备(在我的情况下为Android浏览器4.3)打开时不应用媒体查询。

To simplify the problem and show it on here, I have created a super simple ONLINE DEMO with just this code: 为了简化问题并在此处显示,我仅用以下代码创建了一个超级简单的在线演示

<!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>

      body{background-color: yellow;}

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

When I open this from my mobile, it should have red background as it is less than 25 em width, but it does not apply this. 当我从手机上打开它时,它的背景应该是红色,因为它的宽度小于25 em,但它并不适用。

This works properly on Chrome on my Android, but not from my Android browser 4.3. 这可以在Android上的Chrome上正常运行, 但不能从Android浏览器4.3上正常运行。 I have tested this on almost 10 devices, and all work properly (having background color red), even on other Android Browser versions. 我已经在将近10个设备上对此进行了测试,并且即使在其他Android浏览器版本上,它们也都能正常工作(背景颜色为红色)。

Is there any known bug about this? 是否有任何已知的错误?

If I set media queries with PX instead of EM, it applies correctly. 如果我使用PX而不是EM设置媒体查询,则可以正确应用。

Different browsers/devices have different issues, and mobile browsers are especially buggy. 不同的浏览器/设备存在不同的问题,而移动浏览器尤其容易出错。 Is it just your phone or all android devices? 仅仅是您的手机还是所有android设备? It is probably just an issue related specifically to that browser or device. 这可能仅仅是与该浏览器或设备有关的问题。 Test on other mobile browsers and see what browsers have the issue. 在其他移动浏览器上进行测试,看看哪些浏览器有此问题。 Narrow it down and then you can start looking at a more specific problem. 缩小范围,然后您可以开始研究更具体的问题。 Also, double check your mobile browser screen width, that can be confusing sometimes. 另外,请仔细检查您的移动浏览器的屏幕宽度,有时这可能会造成混淆。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM