iPhone郵件調整大小圖像/ div在HTML電子郵件

我使用MadMimi電子郵件促銷。到目前爲止，我的電子郵件在所有瀏覽器和設備上看起來都很一致，包括iPad上的iOS（在郵件應用程序中）。然而，iPhone上的iOS上的圖像有一個奇怪的調整大小問題（同樣，郵件應用程序）。請參閱下面的CSS和屏幕截圖。正如你所看到的，圖像會突破其父元素的寬度。有誰知道爲什麼發生這種情況或如何糾正？謝謝。iPhone郵件調整大小圖像/ div在HTML電子郵件

CSS：

.outer-wrapper { 
    width: 600px; 
    max-width: 100%; 
    margin: 0 auto; 
} 
.inner-wrapper { 
    width: 100%; 
    border-radius: 10px; 
    overflow: hidden; 
    background-color: white; 
    border: 1px solid #dddddd; 
} 
img { 
    width: 600px; 
    max-width: 100%; 
    height: auto; 
}

HTML：

<body> 
    <div class="outer-wrapper"> 
     <div class="browser">Email look weird? Be sure to enable images, or view it on the web <a href="[[web_link]]" target="_blank">here</a>.</div> 
     <div class="inner-wrapper"> 
     <a href="#"><img src="http://pintsizedtreasures.com/newsletters/header-2.jpg"></a> 
     <div class="body-wrapper"> 
      [content...] 
     </div> 
     </div> 
    </div> 
</body>

來源

2015-08-08 preahkumpii

由於圖像狀態100％它會佔用的整個寬度。如果您希望它與信件的寬度相同，則應將其移動到該div標籤內。我假設它不是因爲我看不到html代碼。

如果你有不同的設備的特定的css部分，你可以在那裏改變它。或者，另一種選擇是爲這個ios設備創建一個css類，並在那裏編輯寬度，這樣就不會更改其他工作設備。

來源

2015-08-12 15:33:08

我添加了HTML。我明白，圖像的100％寬度將填充其父母，而不是身體，但一個div，它也有父母。 – preahkumpii

你爲什麼不把內包裝物放在身體包裝物內，這樣它可以採取父母的寬度？或者就像我之前說過的，你可以讓css類在它處於一個ios設備中時拾取，因此它可以爲ios設備設置不同的寬度。例如@media僅屏幕和（最小裝置寬度：375px）和（最大裝置寬度：667px）和（-webkit-min-device-pixel-ratio：2）{width：80％; } –

我沒有把內部包裝放在body wrapper中，因爲圖像是標題圖像，並且內容與該圖像分開。內容中還包含圖片。身體包裝也將有利潤等。除此之外，核心問題仍然存在，爲什麼圖像在iPhone上不像其他客戶那樣行事。 – preahkumpii

我通過反覆試驗找到了答案。我已將.outer-wrappermax-width和width的值取反。正確的CSS應該閱讀：

.outer-wrapper { 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto; 
}

我認爲正在發生的是，當用戶在iPhone上，還有中視小於600個像素，所以渲染器回落至max-width爲.outer-wrapper。並且由於它設置爲100％而不是聲明的像素值，所以100％寬度將回落到視口寬度，而不是其父寬度。所有其他瀏覽器的視口大於600像素，這是一個聲明的像素值，並且不會發生問題（iPad，桌面等）。顯然，我的愚蠢的疏忽。

這是它應該看起來的樣子。

來源

2015-08-13 21:28:49 preahkumpii

iPhone郵件調整大小圖像/ div在HTML電子郵件

回答

相關問題