HTML電子郵件：@media查詢在移動設備和Outlook上工作

我正在爲在Outlook和移動設備中查看的電子郵件編碼HTML。我想爲Outlook使用表格（我需要多列設置），以及移動設備的單列div（或其他任何東西< 400px）。HTML電子郵件：@media查詢在移動設備和Outlook上工作

我試圖用@media查詢做到這一點，我知道Outlook的CSS支持是非常低劣的，但我想知道是否有人知道可以讓Outlook「忽略」@media查詢的黑客攻擊< 400px ，併爲> 400px部分應用樣式。我試過這個：

@media (max-width: 480px) 
{ 
    .mobile-email { background-color:green; } 
} 

@media (min-width:500px) 
{ 
    .mobile-email { background-color:red;} 
}

麻煩似乎是Outlook忽略了兩者。有什麼辦法可以讓這種事情在Outlook中工作？

在此先感謝！

來源

2013-04-09 ragebiswas

也許這個網站：http://www.campaignmonitor.com/guides/mobile/將幫助你瞭解wat和wat不要做的事。意思是沒有黑客，它會工作，因爲它是支持的，或不。 – Mark 2013-04-09 08:03:58

在所有的誠實中，我會明確指出。 HTML電子郵件是一件恐怖的事情。將媒體查詢添加到混音中會造成麻煩。

黑莓手機不支持媒體查詢的一個開始......

http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails

展望勉強甚至不標準的CSS，因爲它switched it's rendering engine to MS Word's。

Check out this site about email standards支持更多信息。我仍然使用HTML電子郵件中的內聯樣式和表格，因爲它仍然是獲得結果的最一致的方式（在2013年非常糟糕）

來源

2013-04-09 08:48:46 SpaceBeers

感謝SpaceBeers。是的，我完全瞭解這些限制，但我沒有太多選擇。對於您撰寫的電子郵件，您如何確保它們適合iPhone/Android電子郵件客戶端？ – ragebiswas 2013-04-09 09:39:26

@Raj - 保持模板非常簡單，然後執行％表格。這是可怕的，但它做到了這一點。 – SpaceBeers 2013-04-09 09:47:52

最佳做法是爲背景顏色執行內聯css。你寫的課程不能跨越邊界。有些像腳本這樣的設備有些像腳本這樣。例如，當您使用需要隱藏邊框的響應電子郵件時;大多數設備和瀏覽器都會按媒體查詢呼叫進行。然而，Android薑餅不會做一個隱藏的邊框。 iPhone會隱藏邊界。 Outlook 2013將隱藏邊界，但雅虎不會這樣做。對於你做Outlook 2007和2010的背景顏色需要內聯你會希望它在這裏閱讀文本

我希望這會幫助你。

來源

2013-06-16 01:55:00 user2489940

HTML電子郵件：@media查詢在移動設備和Outlook上工作

回答

相關問題