Ширина адаптивного письма в Gmail

У меня есть этот шаблон электронного письма:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1" />
    <title>title</title>
    <style type = "text/css">
    img { max-width: 600px;  -ms-interpolation-mode: bicubic;}
    .ReadMsgBody { width: 100%; }
    .ExternalClass {width:100%;}
    .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
    body {
      width: 100%;
      height: 100%;
      direction: rtl;
    }
    .force-full-width {
      width: 100% !important;
    }
    </style>
    <style type = "text/css" media = "only screen and (max-width: 599px)">
      @media only screen and (max-width: 599px) {
        table[class* = "w320"] {
          width: 320px !important;
        }
      }
    </style>
  </head>
  <body dir = "rtl" class = "body" style = "width:100vw; padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor = "#ffffff">
  <table align = "center" cellpadding = "0" cellspacing = "0" width = "100%">
    <tr>
      <td align = "center" valign = "top" style = "background-color:#ffffff" width = "100%">
      <center>
        <table cellspacing = "0" cellpadding = "0" width = "600" class = "w320">
          <tr>
            <td align = "center" valign = "top">
              <table class = "force-full-width"  width = "100%" cellspacing = "0" cellpadding = "20" bgcolor = "#ef6900">
                <tr>
                  <td style = "background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">
                    Some text
                  </td>
                </tr>
              </table>
              <!-- more tables -->
            </td>
          </tr>
        </table>
      </center>
      </td>
    </tr>
  </table>
  </body>
</html>

Он работает в приложении Gmail на Android, но в настольной версии содержимое электронной почты выходит за рамки <u></u>. Если я удалю width:100vw; из тега body, рабочий стол будет работать нормально, но в мобильной версии содержимое будет переполнено. Мой вопрос: как сделать ширину тела 100% на мобильных устройствах и 600 пикселей на компьютерах? Я пробовал max-width: 600px; в кузове, но он не работает. Я также попробовал 100% вместо 100vw (потому что 100 vw - это ширина экрана), и это тоже не работает.

html css gmail html-email responsive

15.03.2018 14:43

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

7 569

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваша электронная почта будет работать нормально, если вы удалите width:100vw; из тега body.

Нет, это не так. Видна только половина писем, остальная часть переполняется.

— 15.03.2018 15:35

Я не уверен, что вы делаете, но я протестировал код, который вы разместили в Litmus, на всех основных почтовых клиентах, а затем протестировал его, отправив свою версию в Gmail из Putsmail. Ваша версия сдвигает вещи вправо. Моя версия работает нормально, но не полностью сконцентрирована на мобильном Android.

— 15.03.2018 15:52

Правильно, моя версия сдвигает все вправо, как это исправить?

— 15.03.2018 16:03

Исправил настольную версию, удалив width:100vw; из тега body. Это оставляет версию Android с более широким левым полем, но таблица все еще находится в теле письма.

— 15.03.2018 16:15

15.03.2018 15:07

Ответ принят как подходящий

Я внес несколько изменений, надеюсь, это тот результат, который вам нужен. Я сделал следующее:

убрал width:100vw из корпуса
добавлено тело класса, которое вы используете в теге тела, с определенным CSS тела.
Изменен медиа-запрос (убран пробел)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /><meta name = "viewport" content = "width=device-width, initial-scale=1" />
	<title>title</title>
	<style type = "text/css">img { max-width: 600px;  -ms-interpolation-mode: bicubic;}
    .ReadMsgBody { width: 100%; }
    .ExternalClass {width:100%;}
    .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
    body, .body {
      width: 100%;
      height: 100%;
      direction: rtl;
    }
    .force-full-width {
      width: 100% !important;
    }
	</style>
	<style media = "only screen and (max-width: 599px)" type = "text/css">@media only screen and (max-width:599px) {
        table.w320 {
          width: 320px !important;
        }
      }
	</style>
</head>
<body bgcolor = "#ffffff" class = "body" dir = "ltr" style = "padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none">
<table align = "center" cellpadding = "0" cellspacing = "0" width = "100%">
	<tbody>
		<tr>
			<td align = "center" style = "background-color:#ffffff" valign = "top" width = "100%">
			<center>
			<table cellpadding = "0" cellspacing = "0" class = "w320" width = "600">
				<tbody>
					<tr>
						<td align = "center" valign = "top">
						<table bgcolor = "#ef6900" cellpadding = "20" cellspacing = "0" class = "force-full-width" width = "100%">
							<tbody>
								<tr>
									<td style = "background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">Some text</td>
								</tr>
							</tbody>
						</table>
						<!-- more tables --></td>
					</tr>
				</tbody>
			</table>
			</center>
			</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Вышеупомянутый код, протестированный в Outlook 2017 и приложении Gmail (v8.2.11), теперь работает правильно.

Если у вас есть какие-либо вопросы, дайте мне знать.

16.03.2018 00:28