CSS媒体查询不适用于IOS gmail应用答案

【问题标题】：CSS media query is not working on IOS gmail appCSS媒体查询不适用于IOS gmail应用
【发布时间】：2021-11-24 17:41:11
【问题描述】：

我创建了 HTML 时事通讯模板，我正在使用这个简单的媒体查询，但它不适用于 gmail IOS 应用程序。我已经从文件中删除了所有其他 css。 I tried @media with screen also

<style>
  @media (min-width: 639px) { 
  .strict-responsive{
    background-color: yellow;
    width: 50% !important; max-width: 50% !important; display: table-cell !important; margin: 0 auto !important; text-align: center !important;
  }
}
 @media (max-width: 640px) {
   .strict-responsive{
       background-color: blue;
    width: 100% !important; max-width: 100% !important; display: table !important; margin: 0 auto !important; text-align: center !important;
  }
 }
</style>

我已经添加了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" lang="en">

<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

和 HTMLS 在下面。链接和 urls 是有效的，并且是基于生产的。

<div id="section_1633119029896" class="hse-section">
    <div class="hse-column-container hse-border" style="background-color:#ffffff;">
        <div id="column_1633119029896_0" class="strict-responsive">
            <div id="hs_cos_wrapper_module_16331191216405" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
                <table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
                    <tbody>
                        <tr>
                            <td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px;  font-size:0px;">
                                <a href="mobile-phones/iphone-13?capacity=128GB&amp;color=Pink&amp;contractTerm=36" target="_blank" data-hs-link-id="0">
                                    <img alt="iPhone 13" src="/iPhone%2013.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="column_1633119029896_1" class=" strict-responsive">
                <div id="hs_cos_wrapper_module_16331191444106" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
                    <table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
                        <tbody>
                            <tr>
                                <td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
                                    <a href="mobile-phones/iphone-12?capacity=128GB&amp;color=Blue&amp;contractTerm=36" target="_blank" data-hs-link-id="0">
                                        <img alt="iPhone 12" src="/iPhone%2012.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

【问题讨论】：

这能回答你的问题吗？ How do I write a media query for Gmail?

标签： css html-email

【解决方案1】：

我无法复制您看到的问题，但是我注意到您在 html 标记之后缺少一个 head 标记。
由于缺少这个，背景颜色没有呈现哪些标志存在问题。

添加/不添加它，MQ 仍然为我工作，但是一个提示是像这样格式化您的 MQ：

@media only screen and (max-width:600px) {...}

让我们知道如何进行这些更改。

【讨论】：