Html電子郵件不能在手機上閱讀媒體查詢

我是開發HTML電子郵件的新手，我遇到媒體查詢問題。Html電子郵件不能在手機上閱讀媒體查詢

這就是發生了什麼事情：當我完成我的電子郵件的開發並調整屏幕大小以檢查它是否響應時，它按計劃工作並適應任何屏幕大小。但是，使用MailChimp發送測試電子郵件以查看電子郵件是否實際響應後，我發現移動應用程序（如Outlook和Gmail）實際上並未將電子郵件大小調整爲屏幕大小。

他們實際上做的字體和較小的圖像，使整個內容與之相適應，好像它是一臺筆記本電腦

有誰知道這是爲什麼發生的事情，我怎麼能阻止它？

這是我head標籤：

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>PROMONOTICIAS</title> 

    <style type="text/css"> 
    /* Client-specific Styles */ 
    #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */ 

    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} 

    /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */ 
    .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */ 

    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */ 

    #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;} 

    img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;} 

    a img {border:none;} 

    .image_fix {display:block;} 

    p {margin: 0px 0px !important;} 

    table td {border-collapse: collapse;} 

    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 

    /*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/ 
    /*STYLES*/ 
    table[class=full] { width: 100%; clear: both; } 

    /*################################################*/ 
    /*IPAD STYLES*/ 
    /*################################################*/ 

    @media only screen and (max-width: 640px) { 
    a[href^="tel"], a[href^="sms"] { 
    text-decoration: none; 
    color: #ffffff; /* or whatever your want */ 
    pointer-events: none; 
    cursor: default; 
    } 
    .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { 
    text-decoration: default; 
    color: #ffffff !important; 
    pointer-events: auto; 
    cursor: default; 
    } 
    table[class=devicewidth] {width: 440px!important;text-align:center!important;} 
    table[class=devicewidthinner] {width: 420px!important;text-align:center!important;} 
    table[class="sthide"]{display: none!important;} 
    img[class="bigimage"]{width: 420px!important;height:219px!important;} 
    img[class="col2img"]{width: 420px!important;height:258px!important;} 
    img[class="image-banner"]{width: 440px!important;height:106px!important;} 
    td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;} 
    td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;} 
    img[class="logo"]{padding:0!important;margin: 0 auto !important;} 

    } 
    /*##############################################*/ 
    /*IPHONE STYLES*/ 
    /*##############################################*/ 
    @media only screen and (max-width: 480px) { 
    a[href^="tel"], a[href^="sms"] { 
    text-decoration: none; 
    color: #ffffff; /* or whatever your want */ 
    pointer-events: none; 
    cursor: default; 
    } 
    .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { 
    text-decoration: default; 
    color: #ffffff !important; 
    pointer-events: auto; 
    cursor: default; 
    } 
    td[class="mobile-title"]{font-size: 15px !important;} 
    a[class="mobile-text"]{font-size: 16px !important;} 
    td[class="mobile-disclaimer"]{font-size: 13px !important;} 
    table[class=devicewidth] {width: 320px !important;text-align:center!important;} 
    table[class=devicewidthinner] {width: 300px !important;text-align:center!important;} 
    table[class="sthide"]{display: none!important;} 
    img[class="bigimage"]{width: 300px !important;height:136px!important;} 
    img[class="col2img"]{width: 300px !important;height:160px!important;} 
    img[class="image-banner"]{width: 320px !important;height:68px!important;} 

    } 
    </style>

來源

2017-05-29 Óscar Aguayo

發送HTML格式的電子郵件可能相當煩人，因爲大多數的客戶端應用程序不支持所有的CSS屬性，有的甚至切斷<head>。這感覺有點像在1995年創建一個網頁。我認爲媒體查詢在大多數情況下都不起作用，因爲它們只是被切斷了！你必須使內聯CSS（嘆息！）響應。我知道，這不是很酷，但它是創建與大多數客戶兼容的HTML郵件的最佳方式。你可能想看看這個網頁，一個小的概述，你可以使用的東西，propably不是：

https://www.campaignmonitor.com/css/

來源

2017-05-29 08:26:08

您好，感謝您的回覆。然而，我的問題並不在於頭部和媒體查詢，而在於手機。如果'head'被切斷，我的樣式就不會被遵守，並且我的電子郵件看起來像一團糟，因爲屏幕較小。然而，我的問題是，Gmail移動應用程序和Outlook Mobile App（我嘗試的兩個應用程序）使得我的電子郵件在桌面上看起來與iPhone 4完全相同，使得所有內容都變得更小。我只是不'不明白爲什麼。 –

這很有趣，聽起來像一些視口問題也許？無論如何，我仍然會推薦編寫內聯樣式，因爲肯定有很多客戶端，它們不支持header-css定義。也許這是一個使用現有模板的選項？這可以節省很多工作，因爲編寫HTML通訊模板可能令人難以置信煩人;） –

是的，我最終使用了Litmus的一個免費模板並重寫了整個電子郵件。我仍然不知道爲什麼會發生這種情況，但使用該模板我完成了這項工作。謝謝你的幫忙，先生！ –

Html電子郵件不能在手機上閱讀媒體查詢

回答

相關問題