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

我完全喪失了什麼問題。任何幫助將不勝感激。

來源

2013-04-05 zheshishei

不幸的是，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可幫助您啓動並運行。

來源

2013-04-05 08:25:39 supermasher

所以問題是我發送到一個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

回答

相關問題