Gmail 的媒体查询问题

如何解决Gmail 的媒体查询问题

我在使用响应式电子邮件时遇到了一些问题。我想处理 gmail。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>Your Message Subject or Title</title>
    <style type="text/css">
        @media only screen and (max-device-width: 640px) {
            div[class="hidden"]{display: none !important;visibility: hidden;}
            .hidden{display: none !important;visibility: hidden;}
        }
        @media only screen and (min-device-width: 641px) {
            div[class="shown-on-mobile"]{display: none !important;visibility: hidden;}
            .shown-on-mobile{display: none !important;visibility: hidden;}
        }

        @media only screen and (max-width: 640px) {
            div[class="hidden"]{display: none !important;visibility: hidden;}
            .hidden{display: none !important;visibility: hidden;}
        }
        @media only screen and (min-width: 641px) {
            div[class="shown-on-mobile"]{display: none !important;visibility: hidden;}
            .shown-on-mobile{display: none !important;visibility: hidden;}
        }
    </style>
</head>
<body>
    <div class="hidden">
        test desktop
    </div>
    <div class="shown-on-mobile">
        test mobile
    </div>
</body>
</html>

在这种情况下，当我在 Gmail 桌面版中打开邮件时，我可以看到“测试桌面版”和“测试移动版”。我不明白为什么显示“测试手机”。此外，gmail 删除了我的 div 上的 css 类。预先感谢您的帮助。