Изменение размера медиазапроса изображения в приложении Android Gmail не работает

Я работаю над отзывчивым письмом, тестирую его в Litmus для Android 6.0 и на физическом устройстве Samsung 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;}
}

Вот HTML-код из тела:

<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>

Я пытаюсь сделать изображение полноразмерным с помощью медиа-запроса. Поскольку предполагается, что Litmus и Gmail-приложение Galaxy S7 должны поддерживать CSS/Media Query, какие-либо предложения?

Источник

2 ответа

У меня нет устройства для тестирования, так что это будет только предположение, но я бы попробовал в стандартной записи 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;
    }
}
Источник

Это может зависеть от того, каким клиентом вы пользуетесь. Не все версии приложения Gmail поддерживают медиазапросы.

Приложение Gmail для Android (учетная запись POP/IMAP) не поддерживает медиазапросы.

Вы можете найти полный список здесь:

Gmail предлагает поддержку адаптивного дизайна, улучшенную стилизацию шрифтов + CSS для доступности

Источник
Другие вопросы по тегам