iPhone Mail Größenanpassung Bilder/Div in HTML-E-Mail

Ich benutze MadMimi für E-Mail-Aktionen. Bis jetzt sehen meine E-Mails in allen Browsern und Geräten einheitlich aus, einschließlich iOS auf dem iPad (in der Mail-App). Es gibt jedoch ein seltsames Problem bei der Größenänderung mit Bildern auf iOS auf dem iPhone (wieder die Mail-App). Siehe das CSS und den Screenshot unten. Wie Sie sehen können, platzt das Bild aus der Breite des übergeordneten Elements heraus. Weiß jemand, warum das passiert oder wie man es korrigiert? Vielen Dank.iPhone Mail Größenanpassung Bilder/Div in HTML-E-Mail

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>

Quelle

2015-08-08 preahkumpii

Da das Bild 100% heißt es, wird die ganze Breite einnehmen. Wenn Sie möchten, dass es dieselbe Breite wie der Buchstabe hat, sollten Sie es innerhalb dieses div-Tags verschieben. Ich gehe davon aus, dass es nicht ist, da ich den HTML-Code nicht sehen kann.

Wenn Sie einen bestimmten CSS-Abschnitt für verschiedene Geräte haben, können Sie ihn dort ändern. Oder eine andere Option besteht darin, eine CSS-Klasse nur für dieses iOS-Gerät zu erstellen und die Breite dort zu bearbeiten, damit Sie den Rest der Arbeitsgeräte nicht ändern.

Quelle

2015-08-12 15:33:08

Ich habe HTML hinzugefügt. Ich verstehe, dass die 100% -Breite des Bildes seinen Elternteil füllt, der nicht der Körper ist, sondern ein div, das auch einen Elternteil hat. – preahkumpii

Warum legen Sie nicht inner Wrapper innerhalb der Body Wrapper, so dass es die Eltern Breite nehmen kann? Oder wie ich schon sagte, Sie können die css-Klasse zum Abholen machen, wenn sie in einem iOS-Gerät ist, damit sie eine andere Breite für iOS-Geräte haben kann. Zum Beispiel @media nur Bildschirm und (min-Gerät-Breite: 375px) und (max-Gerät-Breite: 667px) und (-webkit-min-Device-Pixel-Verhältnis: 2) {Breite: 80%; } –

Ich habe den inneren Wrapper nicht in den Body Wrapper eingefügt, da das Bild das Headerbild ist und der Inhalt von diesem Bild getrennt ist. Der Inhalt enthält auch Bilder. Der Body Wrapper hätte auch Ränder, etc. Neben all dem bleibt die zentrale Frage, warum sich die Bilder auf dem iPhone nicht wie bei jedem anderen Client verhalten. – preahkumpii

Ich fand die Antwort durch Versuch und Irrtum. Ich hatte die Werte für .outer-wrappermax-width und width umgekehrt. Die korrekte CSS soll lauten:

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

Was ich denke, passiert ist, dass, wenn der Benutzer auf einem iPhone, gibt es weniger als 600 Pixel im Ansichtsfenster, so dass der Renderer fällt für .outer-wrapper-max-width zurück. Und da es auf 100% und nicht auf einen deklarierten Pixelwert gesetzt ist, fällt die img 100% -Breite auf die Breite des Darstellungsbereichs zurück, nicht auf die Breite des Darstellungsbereichs. Alle anderen Browser haben ein Bildfenster, das größer als 600 Pixel ist, was ein deklarierter Pixelwert ist, und das Problem tritt nicht auf (iPad, Desktop usw.). Dumme Aufsicht von mir, anscheinend.

So soll es aussehen.

Quelle

2015-08-13 21:28:49 preahkumpii

iPhone Mail Größenanpassung Bilder/Div in HTML-E-Mail

Antwort

Verwandte Themen