Максимальная ширина не работает в электронной почте в формате html при доступе к Gmail из мобильного браузера?

Я пытаюсь создать столбец шириной 600 пикселей и максимальной шириной 100%.

<table style = "width:600px;max-width:100%" id = "my-table">
    <tbody>
        <tr>
            <td> </td>
            <td > <img style = "width:600px;max-width:100%"> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

Я пробовал это в Gmail, в Samsung Internet и в Firefox, и в обоих случаях ширина экрана превышает ширину экрана. Я также попробовал добавить

<style>                              
@media screen and (max-width:500px) {
    table {
        max-width: 350px !important;
    }
}

</style>

но это тоже не работает. Хотя это работает в приложении Gmail.

html css html-email responsive

15.04.2024 16:54

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 3

Одна вещь, которую я всегда делаю, — это следить за тем, чтобы моя веб-страница отображалась одинаково, чтобы я мог установить / удалить параметры страницы по умолчанию.

В вашем случае вы можете попытаться принудительно установить атрибут ширины и высоты html и body в вашем CSS-файле на 100%.

Также проверьте отступы и поля, которые иногда могут доставить вам много проблем.

16.04.2024 08:36

Мобильная веб-почта Gmail не поддерживает <style> теги и медиа-запросы. https://www.caniemail.com/features/css-at-media/

16.04.2024 11:04

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

Вот то, что я использую, и оно работает на мобильном телефоне Gmail. Пожалуйста, попробуйте.

@media only screen and (max-width: 599px) {
.email-container {
    width: 100%!important;
}
.pattern {
    width: 100% !important;
    margin: auto !important;
}
img.pattern {
    max-width: 100% !important;
    height: auto !important;
}
}

  <table border = "0" cellpadding = "0" cellspacing = "0" width = "100%">
  <tbody>
    <tr>
      <td align = "center" valign = "top" width = "100%"><table role = "presentation" border = "0" cellspacing = "0" cellpadding = "0" width = "600" style = "width:600px;" class = "email-container">
          
          <!-- Header Image -->
          <tr>
            <td><table role = "presentation" cellspacing = "0" cellpadding = "0" border = "0" width = "100%">
                <tr>
                  <td align = "center" valign = "top"><img class = "pattern" src = "http://fpoimg.com/1200x600?text=Preview" width = "600" alt = "img" border = "0" style = "display:block;width:600px;max-width:600px;height:auto;"/></a></td>
                </tr>
              </table></td>
          </tr>
          <!-- End Header Image -->
          
        </table></td>
    </tr>
  </tbody>
</table>

Эй, извините за более поздний ответ. Это работало в веб-версии Gmail, но в приложении Gmail отображение кажется странным.

— 29.04.2024 18:12

17.04.2024 09:24