> Das Dienstleisterverzeichnis für Marketing <        
print logo

Darstellungsprobleme unter iOS 10

Gerade haben wir unsere Newsletter-Schablonen für hochauflösende Bildschirme optimiert, da tauchen mit dem Release von iOS 10 neue Probleme auf.
Yvonne Perdelwitz | 30.11.2016
 

Gerade haben wir unsere Newsletter-Schablonen für hochauflösende Bildschirme optimiert, da tauchen mit dem Release von iOS 10 die nächsten Probleme auf: Newsletter werden auf dem iPhone plötzlich auf Bildschirmhöhe verkleinert. Oder die mobile Version hat einen kleinen Rand, der im Design gar nicht vorgesehen ist.

Mit dem Release von iOS 10 hat Apple Mitte September dem neuen Betriebssystem einige Autojustierungseigenschaften mitgegeben, die so manchen Newsletter "alt" aussehen lassen.

Mailings werden plötzlich auf Bildschirmhöhe verkleinert und dadurch natürlich komplett unleserlich. Abhilfe schafft es, im Head der E-Mail folgendes auszutauschen:
<meta name="viewport" content="width=320"/> mit
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Danach bleibt noch das Problem, dass in der mobilen Version einiger Mailings plötzlich ein Rand neben dem Newsletter angezeigt wird (padding), der so nicht im Ursprungsdesign vorgesehen ist. Hier hilft es im <html> und <body> ein padding:0 zu setzen und gleichzeitig die media classes prozentual abzubilden, also z.B. table[class="320"] {width: 100% !important;} statt {width: 320px !important;}.

Auch Apple hat mittlerweile reagiert. So empfiehlt der Apple Mail Entwickler James Magahern das auto-scaling mit folgendem Befehl <meta name=”x-apple-disable-message-reformatting”> komplett zu deaktivieren.

Mehr zum Thema:
litmus.com/blog/9-things-you-need-to-know-about-email-in-ios-10
github.com/hteumeuleu/email-bugs/issues/18#issue-161415347