html eine E-Mail fit über mehrere mobile Geräte machen

Question

Hallo, ich erschaffe einen E-Newsletter und versuche, es zu ändern, wenn es auf einem Handy angezeigt wird, ich habe es funktioniert auf dem iPhone, aber Android bin ich unsicher, wie zu ändern, weil von den massiven Bildschirmvarianten. Heres was ich bis jetzt bekommen habe.

also in meinem ich habe auch Dinge, die den Stil überstiegen, wenn die Bildschirmbreite eine bestimmte Größe hat.

@media only screen and (max-device-width: 320px) { 
      .hide { display: none !important; } 
      #main_content, #inner_content, .mobwidth { width: 300px !important; } 
      #content_rows, .mobwidthtext {width:300px !important;} 
      .banner {height:94px !important;} 
      .top {height:67px !important;} 
      .footer {height:109px !important;} 

    } 


    @media only screen and (max-device-width: 400px) { 
      .hide { display: none !important; } 
      #main_content, #inner_content, .mobwidth { width: 400px !important; } 
      #content_rows, .mobwidthtext {width:380px !important;} 
      .banner {height:117px !important;} 
      .top {height:83px !important;} 
      .footer {height:136px !important;} 

    } 

Answer 1

Die meisten E-Mail-Clients ignorieren CSS-Deklarationen, die nicht inline sind. Eingebettete Stylesheets werden ebenfalls ignoriert. Medienabfragen funktionieren nicht, da sie die von webbasierten E-Mail-Clients, wie z. B. Google Mail, verwendeten überschreiben würden (d. H., Was Sie nicht tun möchten, funktioniert nicht).

E-Mail HTML-Standards sind ziemlich hirntot. Denken Sie daran, dass Dinge wie MS Outlook nicht einmal Browser-Technologie verwenden, um E-Mails anzuzeigen - sie verwenden die MS Word-Engine.

Hier ist eine gute Anleitung, was CSS-Funktionen können in E-Mails verwendet werden:

http://www.campaignmonitor.com/css/

Answer 2

ich mit der obigen Antwort nicht einverstanden sind. Die Verwendung von Medienabfragen für Mobilgeräte funktioniert auf jeden Fall, aber für Android legen Sie Ihre maximale Bildschirmgröße auf 480 fest. Achten Sie darauf, dass sie für alle von der Abfrage festgelegten Stile wichtig ist und dass Sie ein allgemeines Layout in Ihren Inline-Stilen haben. Dies führt dazu, dass der Browser die css im Kopf entfernt und nur den Inline verwendet. Dann die Handys (die Mehrheit von denen nicht Kopf abziehen) mit Ihren Medien Abfragen, würde ich empfehlen, eine große Menge an Tests vor dem Senden. Aber das einzige Problem, das Sie haben, ist nur die richtigen Maximalbreiten zu finden, da Sie auch die Hoch- und Querbreiten berücksichtigen müssen. Auch wenn man bedenkt, dass Zoom auch meia absetzen kann Abfragen mit einigen Geräten