@media 查询被 iphone 忽略答案

【问题标题】：@media queries being ignored for iphone@media 查询被 iphone 忽略
【发布时间】：2013-03-27 13:58:26
【问题描述】：

由于某种原因，当我发送电子邮件时，我的媒体查询不适用。我将它从 Outlook 2007 发送到 gmail 并使用 iphone 4s 查看它。我尝试使用更简单的@media 查询规则（即只更改字体颜色的媒体查询）发送测试电子邮件，但这些也不起作用。此外，我尝试从教程中发送演示 html 电子邮件（例如：http://www.netmagazine.com/tutorials/build-responsive-emails），但那里的媒体查询也被忽略了

我在下面附上了我的代码的开头：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sample</title>
<style type="text/css">
    @media only screen and (max-width: 480px) { 
        table[class="contenttable"] { 
            width:400px !important;
            text-align: left !important;
        }

        table[class="contenttable2"] { 
            width: 382px !important;
            text-align: left !important;
        }

        td[class="changer"] { 
            width:382px !important;
            height: 10px !important;
        }

        td[class="autoalign"] {
            padding: 0 !important;
            text-align: center !important;
        }

        img[class="logo"]  {
            margin-left: -10px !important;
        }

        td[class="autotext"] {
            font-size: 14px !important;
            text-align:left !important;
            height: 70px !important;
        }

        td[class="textresize"] {
            font-size: 8px !important;
        }

        img[class="imgHide"] {
            display:none !important;
            height:0 !important;
            width:0 !important;     
        }
    }
</style>
</head>
<body style="padding:0; margin:0; webkit-text-size-adjust:none;-ms-text-size-adjust: 100%;"> 
<table width="600" border="0" cellpadding="0" cellspacing="0" class="contenttable" align="center" style="font-family: Arial;">

我完全不知道问题是什么。任何帮助将不胜感激。

【问题讨论】：

标签： media-queries html-email

【解决方案1】：

不幸的是，gmail 不支持媒体查询（请参阅http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails），尽管很多都支持。你最好的选择是首先设计没有媒体查询，并使用一些常规的 CSS 来让列堆叠等，接受这样一个事实，即你的设计在任何地方看起来都不完美，但仍然可以访问。然后你可以添加一些媒体查询魔法，让它在每个支持它的客户端上看起来都很棒。请参阅 http://www.zurb.com/article/1119/create-emails-for-any-device-introducing- 了解此类方法的一个很好的示例，并参阅 http://www.zurb.com/playground/responsive-email-templates 了解一些基本模板，以帮助您启动和运行。

【讨论】：

所以问题是我要将它发送到 gmail 吗？我正在使用本机 iphone 邮件应用程序来查看它，而不是浏览器。这有什么不同吗？
很遗憾没有。根据第一个链接，“由于 Gmail 不支持嵌入式 CSS，因此任何 Gmail 移动应用程序都不支持媒体查询也就不足为奇了”。
Gmail 会删除样式标签中的所有内容。由于这是声明媒体查询的唯一方法，因此它不支持它们。