Question

以下是我们在Gmail，Yahoo，Outlook，Rediffmail，iPhone，iPad等不同电子邮件客户端上测试的HTML电子邮件模板代码。

在这里我们有两个表块，我们试图在iPhone和iPad上显示Web浏览器和移动部件上的Web部件。

但是在浏览器Gmail上使用此代码显示两个块，Yahoo和Outlook显示移动设备，iPhone和iPad显示移动阻止。

@media无效。

请告诉我该怎么办？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Weekly</title>
  <style type="text/css">
    #web{
        display: inline-block;
    }
    #mobile{
        display: none;
    }
  </style>
  <style>
      @media only screen and (max-device-width: 480px) {
        #web{
            display: none;
        }
        #mobile{
            display: inline-block;
        }
    }
  </style>
</head>
<body>
    <table id="web">
        <tr>
            <td>
                aditya on web
            </td>
        </tr>
    </table>
    <table id="mobile">
        <tr>
            <td>
                aditya on mobile
            </td>
        </tr>
    </table>
</body>
</html>

^{来源：https://github.com/Mange/roadie/issues/77}

Answer 1

Gmail不支持媒体查询。它根本不支持<style>标记，这就是为什么我们总是在设计HTML电子邮件时内联我们的CSS。

显示：媒体查询没有问题

1 个答案: