IPhone Mail изменяет размер изображений /div в html-письме

Я использую MadMimi для продвижения по электронной почте. Пока мои письма выглядят согласованно во всех браузерах и устройствах, включая iOS на iPad (в приложении Mail). Тем не менее, есть странная проблема изменения размера с изображениями на iOS на iPhone (опять же, приложение Mail). Смотрите CSS и снимок экрана ниже. Как вы можете видеть, изображение вырывается из ширины его родительского элемента. Кто-нибудь знает, почему это происходит или как его исправить? Спасибо.

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>

Ответ 1

Я нашел ответ методом проб и ошибок. Я изменил значения для .outer-wrapper max-width и width. Правильный CSS должен читать:

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

Я думаю, что, когда пользователь находится на iPhone, в области просмотра меньше 600 пикселей, поэтому рендеринг возвращается к max-width для .outer-wrapper. И поскольку он установлен на 100%, а не на объявленное значение пикселя, ширина img 100% возвращается к ширине окна просмотра, а не к ее родительской ширине. У всех других браузеров есть область просмотра размером более 600 пикселей, которая является объявленным значением пикселя, и проблема не возникает (iPad, рабочий стол и т.д.). Глупый контроль над моим, по-видимому.

Вот как он должен выглядеть.

Ответ 2

Поскольку состояние изображения 100%, оно будет занимать всю ширину. Если вы хотите, чтобы она была той же ширины, что и буква, вы должны переместить ее внутри тега div. Я предполагаю, что это не так, поскольку я не вижу HTML-код.

Если у вас есть специальный раздел css для разных устройств, вы можете его изменить. Или другой вариант - создать класс css только для этого устройства ios и отредактировать ширину там, чтобы вы не изменили остальные рабочие устройства.