HTML電子郵件 - 不同的圖像，桌面和移動

我想我已經嘗試了所有可能的現有解決方案，所以我在這裏問是否有人知道什麼是顯示的最佳方式：HTML電子郵件 - 不同的圖像，桌面和移動

簡單（點擊或不使用臺式機不同的圖像和點擊）圖像
移動
與最流行的電子郵件客戶端

這裏發佈的解決方案兼容：A Slick, New Image Swapping Technique for Responsive Emails似乎是最好的小號雖然遠，但它有一個小問題，總是下載2個圖像（我不是故意顯示的），無論你是移動或桌面。

<a href="http://www.emailonacid.com"> 
    <span id="switcher"> 
    <img id="houdini" src="http://www.sample.com/desktop.jpg" alt=""> 
    </span> 
</a> 

<style> 
    @media only screen and (max-device-width: 489px) { 
    span[id=switcher] { 
     display:block; 
     background-image: url(http://www.sample.com/mobile.jpg) !important; 
     background-repeat: no-repeat !important; 
     background-position: center !important; 
     width: 300px !important; 
     height: 250px !important; 
    } 
    img[id=houdini] {display: none !important;}1 
    } 
</style>

即使未顯示圖像（顯示：無），「img」標籤也會始終下載圖像。

我已經嘗試了許多其他方式，使用桌面上的背景圖像，但這似乎需要微軟的VML代碼和解決方案看起來非常混亂，有時甚至不能在android上工作。

有人能幫忙嗎？

JSFiddle

謝謝

來源

2016-06-13 MeV

您是否嘗試過使用媒體查詢更改跨度的bg圖像並將標記全部放在一起？ - 那麼，有效的一個css規則與bg圖像，然後媒體查詢覆蓋移動bg圖像？ – asimovwasright

所有電子郵件客戶端都不支持媒體查詢，因此，如果圖片只與媒體查詢代碼一起顯示，則不會顯示在所有電子郵件客戶端 – MeV

此外，@asimovwasright，所有客戶端都不支持背景圖片（尤其是舊的像Windows上的Microsoft Outlook）因此，這是不可能的 – MeV

正如其他人所說，隱藏圖像永遠不會穩定。我的解決方案是創建一個小型的服務器端腳本，爲不同的設備提供不同的圖像。我認爲這是最穩定和最穩健的解決方案。

雖然任何瀏覽器/電子郵件客戶端都可以發送僞造信息，但您可以從請求的標題中識別操作系統，設備和屏幕寬度。

我們用這個包來解析用戶代理信息：https://www.npmjs.com/package/ua-parser ，我們可以用它獲取這些信息： https://github.com/EDMdesigner/supertracker/blob/master/models/session.js

基於設備領域，可以用於不同的圖像。

來源

2016-06-22 12:11:03

謝謝你的回答。這非常有趣，我從來沒有想過它，這絕對是一個可能的解決方案，應該考慮。我會等待，看看是否有其他解決方案出現，否則我會選擇你的最好的一個。 – MeV

你有這樣的testpage或小提琴？當點擊鏈接時，你不會被重定向，但下載文件？上面的代碼不應該這樣做。

來源

2016-06-13 10:31:47

嗨，我已經創建了一個JSFIDDLE（見上文），但這必須在桌面/移動設備上進行測試，所以我不確定如何使用JSFiddle作爲 – MeV

無法爲臺式機和移動設備製作不同的圖像，也無法下載電子郵件。繞過這需要Javascript，這在任何主要的電子郵件客戶端中都不受支持。

我還想指出，無論您使用哪種方法，圖像交換在某些主要郵件應用程序（特別是Gmail）上都不受支持。從設計的角度來看，最佳做法是在桌面和移動設備上使用相同的圖像。

來源

2016-06-13 15:19:47

我不是100％確定沒有辦法做到這一點。 ...讓我們看看是否有人有解決方案:-)但無論如何謝謝你的答案。（是的，我知道兼容性問題，這絕對是要記住的） – MeV

這不幸的是，這是正確的答案。電子郵件可以做很多很酷的事情，但它通常帶有大量膠帶和口香糖，並且需要許多級別的優雅降級以確保在所有電子郵件客戶端上顯示吸引人的內容。圖像交換就是其中之一。 – Gortonington

這是可能的，有點，並且有點棘手。 Gmail可能是自it strips out the <style> tag以來最大的障礙，因此不支持媒體查詢。

首先，需要注意的一點是：Google Apps網絡郵件+移動版Gmail會呈現相同的效果，但我們可以定期更改Gmail網絡郵件。

Gmail中剝離所有元素class和id屬性，但留下了一些其他屬性不變：style，title，lang，width，height，alt，href。 因此，我們可以使用[lang~="x-houdini"] {display: none !important;}之類的東西來定位Gmail郵箱。

因此，使用移動Gmail作爲您要展示內容的基礎，然後您可以覆蓋普通Gmail網絡郵件，將其定位爲隱藏移動Gmail圖片並顯示常規Gmail網絡郵件圖片。

再次，這不適用於Google Apps網絡郵件，它將顯示爲與Gmail應用相同。

This article on Fresh Inbox解釋瞭如何定位特定版本的Gmail。值得一讀，如果你走這條路，並有疑問！

來源

2016-06-21 14:50:41

感謝您的回答。我對Gmail沒有任何問題，因爲網絡郵件和應用程序都沒有使用媒體查詢，因此他們只會顯示桌面圖片。有趣的Gmail目標，從來不知道它。然而，這不會幫助我與我的問題不幸... – MeV

寬度爲100％的圖像如何？我試過了，它似乎適用於不同的寬度。我甚至用chrome的響應模式嘗試過它，即使在那裏，它似乎適用於iPhone尺寸的設備，但圖像質量並不盡如人意。

<html> 
<head> 
    <title>ResponsiveImage</title> 
</head> 
<body> 
    <img src="Tulips.jpg" width="100%"> 
</body> 
</html>

來源

2016-06-26 15:36:20

謝謝你的回答。只有一個寬度爲100％的圖像與我嘗試做的不同：爲電子郵件的桌面版和移動版創建2個不同的圖像。 – MeV

根據他人的回答，我的理解是，您必須採取一種方法，即風格和內容保持固定，但圖像大小不一（例如讓圖像中心對齊）。這樣，當移動或桌面瀏覽器請求圖像時，您可以確定用戶代理，然後從服務器返回相關圖像。因此，所有內容都必須具有響應性，並且每個元素都必須指定樣式。 –

好的，我明白你打算使用gyula.nemeth解決方案 – MeV

HTML電子郵件 - 不同的圖像，桌面和移動

回答

相關問題