文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS媒体查询在IOS gmail应用上不起作用

问CSS媒体查询在IOS gmail应用上不起作用
EN

Stack Overflow用户

提问于 2021-10-04 09:15:40

回答 1查看 230关注 0票数 1

我已经创建了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在下面。链接和网址是工作和产品为基础的。

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

css

html-email

回答 1

Stack Overflow用户

发布于 2021-10-05 17:00:35

我无法复制您所看到的问题，但是我确实注意到您在html标签之后遗漏了一个head标签。

由于缺少了这个，背景颜色没有渲染出有问题的标志。

在添加/不添加MQs的情况下，MQs对我仍然有效，但是有一个技巧是这样格式化您的MQs：

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

让我们知道如何让这些更改为您所用。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69433581

复制

相似问题

问CSS媒体查询在IOS gmail应用上不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS媒体查询在IOS gmail应用上不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS媒体查询在IOS gmail应用上不起作用
EN