Search code examples
androidcssmedia-queriesmobile-devices

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.

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.

This works properly on Chrome on my Android, but not from my Android browser 4.3. I have tested this on almost 10 devices, and all work properly (having background color red), even on other Android Browser versions.

Is there any known bug about this?

If I set media queries with PX instead of EM, it applies correctly.

Solution

  • Different browsers/devices have different issues, and mobile browsers are especially buggy. Is it just your phone or all android devices? 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.