@media查询被忽略为iPhone

问题描述：

由于某种原因，我的媒体查询不适用于我发送电子邮件时。我将它从Outlook 2007发送到Gmail，并使用iPhone 4s查看它。我试着用简单的@media查询规则发送测试邮件（即只改变字体颜色的媒体查询），但这些都不起作用。另外，我试着从教程演示发送HTML邮件（这一个如：http://www.netmagazine.com/tutorials/build-responsive-emails），但媒体查询也被忽略了有@media查询被忽略为iPhone

我已经附上下面我的代码开头：

<!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;">

我完全丧失了什么问题。任何帮助将不胜感激。

答

不幸的是，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邮件应用程序来查看它，而不是浏览器。这有什么区别吗？ – zheshishei 2013-04-05 08:28:40

不幸的不是。根据第一个链接，“由于Gmail不支持嵌入式CSS，因此任何Gmail移动应用都不支持媒体查询并不奇怪”。 – supermasher 2013-04-05 08:33:42

Gmail删除样式标记中的所有内容。因为这是声明媒体查询的唯一方式，所以它不支持它们。 – John 2013-04-05 15:56:50

@media查询被忽略为iPhone

相关推荐