Poczta na iPhone'a zmiana rozmiaru zdjęć/div w html email

Używam MadMimi do promocji e-mail. Do tej pory moje e-maile wyglądają spójnie we wszystkich przeglądarkach i urządzeniach, w tym iOS na iPadzie (w aplikacji Mail). Istnieje jednak dziwny problem z rozmiarem obrazów z systemem iOS na telefonie iPhone (ponownie aplikacja Mail). Zobacz CSS i zrzut ekranu poniżej. Jak widać, obraz wyskakuje poza szerokość jego elementu nadrzędnego. Czy ktoś wie, dlaczego tak się dzieje i jak to poprawić? Dzięki.Poczta na iPhone'a zmiana rozmiaru zdjęć/div w html email

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>

Źródło

2015-08-08 preahkumpii

Ponieważ obraz stanowi 100% zajmie się całą szerokość. Jeśli chcesz mieć taką samą szerokość jak litera, powinieneś przenieść ją wewnątrz znacznika div. Zakładam, że to nie jest, ponieważ nie widzę kodu html.

Jeśli masz określoną sekcję css dla różnych urządzeń, możesz ją tam zmienić. Inną opcją jest utworzenie klasy css tylko dla tego urządzenia ios i edycja jej szerokości, aby nie zmieniać pozostałych pracujących urządzeń.

Źródło

2015-08-12 15:33:08

Dodałem HTML. Rozumiem, że 100% szerokość obrazu wypełni jego rodzica, który nie jest ciałem, ale div, który również ma rodzica. – preahkumpii

dlaczego nie umieścisz wewnętrznego owinięcia wewnątrz owinięcia ciała, aby mogło ono przyjąć szerokość rodziców? Lub, jak powiedziałem wcześniej, można zrobić klasy css, aby odebrać, gdy jest w urządzeniu ios, więc może mieć inną szerokość dla urządzeń ios. Na przykład @media only screen i (min-device-width: 375px) i (max-device-width: 667px) oraz (-webkit-min-device-pixel-ratio: 2) {szerokość: 80%; } –

Nie umieściłem wewnętrznego opakowania wewnątrz owinięcia, ponieważ obraz jest obrazem nagłówka, a zawartość jest oddzielona od tego obrazu. Zawartość zawiera również obrazy. Owijanie ciała miałoby również marginesy, itd. Poza tym głównym pytaniem pozostaje, dlaczego obrazy nie zachowują się na iPhonie tak, jak robią to u każdego innego klienta. – preahkumpii

Znalazłem odpowiedź metodą prób i błędów. Zmieniłem wartości dla .outer-wrappermax-width i width. Prawidłowy CSS powinien brzmieć:

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

Co myślę, że to się dzieje, gdy użytkownik znajduje się na iPhone, nie mniej niż 600 pikseli w rzutni, więc renderer spada z powrotem do max-width dla .outer-wrapper. A ponieważ jest ustawiony na 100% i nie jest deklarowaną wartością piksela, szerokość 100% spada z powrotem do szerokości rzutni, a nie jej szerokości rodzica. Wszystkie inne przeglądarki mają okno o wielkości większej niż 600 pikseli, które jest deklarowaną wartością pikseli, a problem nie występuje (iPad, komputer itp.). Najwyraźniej głupi nadzór.

Tak powinno wyglądać.

Źródło

2015-08-13 21:28:49 preahkumpii

Poczta na iPhone'a zmiana rozmiaru zdjęć/div w html email

Odpowiedz

Powiązane problemy