Android Gmailのアプリのメディアクエリのサイズ変更アプリが動作しない

Question

私はAndroid向けのLitmus 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とGalaxy S7のGmail AppはCSS/Media Queryをサポートしているはずですから、どんな提案ですか？

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

Answer 2

それはあなたが使用しているクライアントから依存してもよいです。 gmail Appのすべてのバージョンでメディアクエリがサポートされているわけではありません。

Gmail Androidアプリ（POP/IMAPアカウント）はメディアクエリをサポートしません。

あなたはここに完全なリストを検索することができます

Gmail Rolls Out Support for Responsive Design, Improved Font Styling + CSS for Accessibility