Отзывчивый мультимедийный запрос электронной почты с двумя столбцами — iPhone не отображает таблицы на всю ширину

Я пытаюсь создать отзывчивую строку из двух столбцов (в таблице), используя медиа-запросы для электронной почты. Используя метод выравнивания таблицы из Mailchimp, он отлично смотрится на десктоп и андроид. На iPhone медиа-запрос указывает «templatecolumnContainer» отображать 100% ширины экрана менее 480 пикселей, но он заполняет только 50%. Другой контейнер столбца заворачивается под изображение и растягивается по ширине области просмотра.

Вот медиа-запрос -

@media only screen and (max-width: 480px) { 
.templateColumnContainer2 {
      display: block !important; 
      width:100% !important; 
      margin-left: auto !important; 
      margin-right: auto !important;
    } 
}

А вот две колонки -

    <table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750">
    <tbody>
        <tr>
            <td align="center" valign="top">
                <table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
                    <tbody>
                        <tr>
                            <td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
                                <img class="columnImage" src="image.jpg">
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
                    <tbody>
                        <tr>
                            <td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top">
                                <h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
                                <p>Some paragraph text</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Я был бы бесконечно благодарен, если бы кто-нибудь мог заполнить любой пробел в кодировании, который я опускаю! Заранее спасибо.


iphone responsive html-email
person rokenbk97    schedule 06.07.2016    source источник
comment
То, что у вас там есть, должно работать. Я подозреваю, что некоторые другие стили, которые у вас есть на столах, мешают этому. Попробуйте удалить некоторые или все встроенные стили, чтобы посмотреть, исправит ли это проблему, а затем постепенно добавляйте их обратно. Извините, у меня нет времени проверить это на себе прямо сейчас.   -  person Michael Holland    schedule 07.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это должно делать то, что вы просите:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<style>
	@media screen and (max-width: 750px) {
		#templateColumns {
			width: 100% !important;
		}
		.templateColumnContainer2 {
			display: block !important;
			width: 100% !important;
			max-width: 100% !important;
		} 
	} 
</style>
</head>

<body width="100%" style="Margin: 0;">
    <center style="width: 100%;">
		<table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns">
			<tr>
				<td class="templateColumnContainer2" width="50%" valign="top">
					<table cellspacing="0" cellpadding="0" border="0" width="100%">
						<tr>
							<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
								<img class="columnImage" src="image.jpg" width="100%" height="auto">
							</td>
						</tr>
					</table>
				</td>
				<td class="templateColumnContainer2" width="50%" valign="top">
					<table cellspacing="0" cellpadding="0" border="0" width="100%">
						<tr>
							<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;">
								<h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
								<p>Some paragraph text</p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</center>
</body>
</html>

Я не уверен, какой родительский HTML у вас есть над этим, но я включил <body> и <center> и немного переписал классы разметки <table> +, чтобы получить адаптивный макет, который складывается, когда окно просмотра опускается ниже ширины рабочего стола <table> в 750 пикселей.

person Ted Goas    schedule 07.07.2016
comment
Приведенное выше решение будет работать только на iPhone. Android-устройства и приложение Gmail по-прежнему будут отображать контент рядом друг с другом. - person Michael Holland; 07.07.2016
comment
Я знаю, я считаю, что это то, для чего был задан вопрос. - person Ted Goas; 08.07.2016
comment
Извините за поздний +1 Тед, но это сработало как шарм!! Не могу отблагодарить вас в достаточной степени, и, надеюсь, этот пост поможет всем, кто испытывает стресс из-за работы по разработке электронной почты. - person rokenbk97; 11.08.2016