2013-03-22 64 views
4

我從我的應用程序發送一些電子郵件。該電子郵件中有html,電子郵件中的第一項是公司徽標圖像iPhone上的HTML郵件預覽

電子郵件在包括iphone在內的所有電子郵件客戶端都呈現良好,但問題是電子郵件「預覽」在iPhone主題行下方。由於郵件正文具有徽標,所以郵件預覽顯示圖像URL。如何避免在預覽中顯示圖片網址,並在預覽中顯示更有意義的文字。 我確實需要將徽標作爲電子郵件正文中的第一件事。

有任何解決方法這樣做呢?

Thansk

回答

1

您是否嘗試過使用altimg標籤裏面?例如 <img src="mycompany.png" alt="company name" />

0

我知道這個問題是有點老了,但它在搜索過來對我來說,我想我會添加一個小技巧:

如果你要去頂部包含一個DIV的路線(preheader,per @John),確保設置它的樣式。

我發現,當人們收到的電子郵件在Outlook中,而preheader沒有原始郵件中出現,這又出現了,如果他們轉發或回覆了消息。

使用這個簡單的解決辦法,以避免問題:

<div style="display:none; color:#fff; font-size:2pt;">This is the abstract text that will appear in your email client's message preview or notification window.<br />&nbsp;</div> 

然後preheader是隱藏的,當他們收到它,文本仍用於與Outlook在iOS預覽通知或文本預覽郵件,當他們轉發或回覆你的信息時,你的觀衆不會看到它,它就是如此的小而白。

還要注意的是這種類型的報頭的將是使用舊的BlackBerry設備的人(黑莓4和黑莓5,如果HTML被禁用)可見。

3

只是增加我的兩分錢這個討論在過去的幾天測試的這個自己各種迭代後。這個問題的其他答案很好從頭開始,但他們都錯過了一些情況的邊緣情況(或者有時並不是那麼邊緣的情況)。我不會聲稱我已經在每個客戶端上都測試過了,但我已經在所有的大客戶端上測試過了:Gmail,Yahoo,Outlook.com/Hotmail,Outlook for Windows和OS X(各種連接到Exchange,POP和IMAP的版本),各種基於Web的IMAP客戶端,iOS Mail(連接到交換服務器和常規IMAP服務器:是,它會在這些情況下呈現不同的預覽),Android Mail,Android/iOS Gmail客戶端,郵箱,雷鳥,和其他一些我現在不記得我的頭頂。

使用preheader div。因爲某些基於網絡的電子郵件服務(Gmail)會將<style>標籤從電子郵件的HTML頭中剝離,所以將div設置爲內聯樣式。內聯樣式display: none;適用於大多數客戶端,但在gmail web視圖和Yahoo web視圖中失敗,除非將其定義爲display: none !important;。如果您在那裏沒有!important聲明,那麼在基於Web的客戶端中讀取這些服務時,預讀器div將在電子郵件正文中可見。

現在,我們使用一個div以下的內聯定義的樣式來隱藏我們從我們在測試的各種客戶端和服務preheader:display: none !important; height:0px; overflow:hidden; color:#ffffff; font-size:2pt;。其中一些在所有或大多數情況下都不起作用,但在它們之間,它們很好地覆蓋了各種基地。該height砍,特別是僅影響一對夫婦的客戶和Gmail的基於Web的客戶端完全打破(它目前重寫高度聲明的最小高度,這是意想不到的),但因爲它的榮譽display: none !important;的preheader結束了隱藏在那裏反正。正如ste7enm提到的那樣,顏色和字體大小的破解會在某些客戶/服務轉發消息時更有效地隱藏預讀器。

邊注:經測試,重新設計和重新測試我們的模板幾次,我已經得出結論,HTML電子郵件是善良純潔的一切事物的死敵。