在Android Gmail应用程序上调整图像的媒体查询大小不起作用

Question

我正在制作一个响应式电子邮件，在Android6.0和三星Galaxy S7物理设备上测试它。

以下是我对头部样式部分的媒体查询：

@media screen and (max-width: 611px), screen and (max-device-width: 611px){
[class=devicewidth100]{width:100%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=devicewidth98]{width:98%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=devicewidth60]{width:60%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=imgdevicewidth]{width:100%!important; height:auto!important; margin-left:auto!important; margin-right:auto!important;}
[class=hide]{display:none !important;}
[class=center]{text-align:center!important; padding-top:5px!important; padding-bottom:5px!important; height:auto!important;}
}

<tr><td style="border-collapse: collapse;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div style="width: 185px;display: inline-block;vertical-align: top;margin-left: auto;margin-right: auto;height: auto!important;background-color: #FFFFFF!important;" class="devicewidth100">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;align-content: center;"><tr><td width="15" style="border-collapse: collapse;"></td><td width="170" class="devicewidth100" style="border-collapse: collapse;margin-left: auto;margin-right: auto;width: 100%!important;height: auto!important;background-color: #FFFFFF!important;"><a href="#" style="color: #F4F4F4;text-decoration: none!important;"><img src="http://placehold.it/810x456" alt="" style="border: none;display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;margin-left: auto;margin-right: auto;width: 100%!important;height: auto!important;background-color: #FFFFFF!important;" width="170" height="125" class="devicewidth100"></a></td><td width="15" style="border-collapse: collapse;"></td></tr></table></div><!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<div style="width: 430px;display: inline-block;vertical-align: middle;margin-left: auto;margin-right: auto;height: auto!important;background-color: #FFFFFF!important;" class="devicewidth100">
<table width="100%" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;align-content: center;">
<tr><td width="15" style="border-collapse: collapse;"></td><td align="left" class="center" style="text-align: left;border-collapse: collapse;padding-top: 5px!important;padding-bottom: 5px!important;height: auto!important;" height="125" valign="middle"><a href="#" style="font-family:'Open Sans', verdana; font-size:20px; font-weight:bold; color:#000000; line-height:22px; text-align:left; text-decoration:none;" class="fontsize-top-news">This is my text, it should get bigger on mobile screens at some point.</a></td></tr>
</table></div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr>

Answer 1

我没有要测试的设备，所以这只是一个猜测，但我会用标准的css表示法进行尝试：

@media screen and (max-width: 611px), screen and (max-device-width: 611px){
    .devicewidth100{
        width:100%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .devicewidth98{
        width:98%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .devicewidth60{
        width:60%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .imgdevicewidth{
        width:100%!important;
        height:auto!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .hide{
        display:none !important;
    }
    .center{
        text-align:center!important;
        padding-top:5px!important;
        padding-bottom:5px!important;
        height:auto!important;
    }
}