Reaktionsschnell Weg 2 Spalte 1 Spalte E-Mail in Outlook 2007, 2010 und 2013
Arbeite ich an der Optimierung von HTML-E-Mails für mobile Geräte. Ich wurde beauftragt mit der Suche nach einer universellen Lösung für die Erstellung einer 2 Spalte 1 Spalte responsive layout. Ich fand einen Artikel, geschrieben von Kampagnen-Monitor - http://www.campaignmonitor.com/guides/mobile/responsive/. Ich habe versucht, Ihr markup und es funktioniert auf den meisten clients und Browsern mit Ausnahme von Outlook 2007, 2010 und 2013. Ich habe ein jsfiddle-link mit meinem markup-Referenz. Gibt es eine Möglichkeit, diese Arbeit zu machen, die in dieser version von Outlook?
EDIT: ich versuche nicht, um die reaktionsfähige Teil der E-Mail in Outlook arbeiten. Ich möchte 2 Tabellen ( Links & Rechts in der jsfiddle-Beispiel) auf display nebeneinander statt gestapelt übereinander. Dies funktioniert in Google Mail (IE, FF, Chrome, Safari), AOL (IE, FF, Chrome, Safari), Yahoo (IE, FF, Chrome, Safari), Hotmail (IE, FF, Chrome, Safari, Apple Mail 4 & 5, Outlook 2003, Android 4.0, iOS 4, 5, & 6. Meine Sorge ist nur mit Outlook 2007 und später, wenn die rendering-engine geändert.
<html>
<head>
<style>
@media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody>
</table>
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #bcbcbc;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</body>
</html>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Haben Sie versucht, indem
align="left"
undalign="right"
auf die stapeltische?Finden Sie in den aktualisierten fiddle: http://jsfiddle.net/bxdUp/1/
Den Sie derzeit haben, werden in der rechten Tabelle mit
align="left"
, aber ich habe Erfolg mit Outlook tabellenausrichtung Manipulation deralign
Wert.border
Attribut0
auf Ihre innere Tabellen - es sollte nicht Sache, aber ich habe gesehen, seltsamer Dinge.Für jedermann, das ist SO und ist auf der Suche nach einer Lösung für das problem von oben, wo der reaktionsschnelle 2-Spalte Inhalt wird AUCH zentriert fand ich, dass die Verwendung von Bedingungen zu definieren, die Spalten nur für Outlook meine Welt 1^300 einfacher. Natürlich ist es nicht mehr ansprechbar in Outlook, aber wirklich... F Outlook.
Ich habe festgestellt, dass Kürzungen in der Tabellenbreite um ein paar Pixel arbeiten, in dem Fall für Outlook, das ich nur annehmen können, ist Outlook rendering-pixel-breiten anders als andere E-Mail-clients.
Nicht ideal, aber es hat für mich gearbeitet.
Ich glaube nicht, dass es ist, ist gonna Arbeit auf Outlook-Versionen. Weil Outlook keine media queries verstehen. Outlook-version 2007 basiert auf der rendering-Engine des IE benutzt, während als Outlook-version 2010 und version 2013 verwenden von Word als rendering-engine für die Darstellung von html-E-Mails. Also ich glaube es gibt keine Möglichkeit, Sie zu erhalten zu arbeiten in Outlook.
Ein weiterer Punkt ist, dass wenn dieser code ausgeführt wird, in Outlook, es wird alles ignorieren, die innerhalb von style-tags. Sie sollten die style als inline für Outlook-E-Mails.
style
tags (fast alle großen E-Mail-client erlaubt, Gmail als einzige Ausnahme).