Question

我正在开展一个项目，当从移动设备（在我的情况下是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>

      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>

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

这适用于我的Android上的Chrome，，但不适用于我的Android浏览器4.3。我已在近10台设备上测试了这一点，并且所有设备都正常工作（背景颜色为红色），即使在其他设备上也是如此Android浏览器版本。

是否有任何已知错误？

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

Answer 1

不同的浏览器/设备有不同的问题，移动浏览器尤其有问题。它只是你的手机或所有Android设备？它可能只是与该浏览器或设备有关的问题。在其他移动浏览器上测试并查看哪些浏览器存在问题。将其缩小，然后您可以开始查看更具体的问题。另外，请仔细检查您的移动浏览器屏幕宽度，这有时会让人感到困惑。

基于EM的媒体查询未在Android浏览器v4.3上应用

1 个答案: