Почему gmail не отвечает на медиа-запросы? - PullRequest
Новая
       35

Почему gmail не отвечает на медиа-запросы?

0 голосов
/ 30 апреля 2019

Чем хорош StackOverflow? Я долго пытался выяснить, почему Gmail не отвечает на медиа-запрос моего электронного письма. С широким экраном это выглядит хорошо, но Gmail не реагирует на ширину экрана моего телефона, поэтому телефон выглядит странно и глючит.

Я уже пытался просмотреть похожие вопросы и даже пытался переписать свой CSS до такой степени, что я несколько раз переписывал свой CSS, чтобы посмотреть, подхватит ли медиа-запрос хотя бы малейшее изменение. 

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width ,initial-scale=1" />
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

    body {
      margin: 0;
      padding: 15px;
    }

    .center {
      text-align: center;
      margin: 0 auto;
    }

    .wrapper {
      width: 100%;
      table-layout: fixed;
    }

    .inner-wrapper {
      width: 100%;
      max-width: 670px;
      background: #554348;
      margin: 0 auto;
    }

    table {
      border-spacing: 0;
      font-family: sans-serif;
      color: #727f80;
    }

    .header-table {
      text-align: center;
      padding: 10px 0px 0 0;
    }

    .header-table .header {
      width: 100%;
      max-width: 610px;
      display: inline-block;
      background: #fff;
      border-top: 2px solid #E5C2C0;
      border-radius: 6px 6px 0 0;
      padding-bottom: 24px;
    }

    .header-table img {
      width: 75px;
      float: left;
      border: 2px solid #E5C2C0;
      border-radius: 6px 0 0 0;
      border-top: none;
    }

    .slogan {
      color: #000;
      font-size: 12px;
      margin-top: 124px;
      color: #7FC29B;
    }

    .slogan-hr {
      width: 25vh;
    }

    .outer-table {
      width: 100%;
      max-width: 670px;
      margin: 0 auto;
    }

    .outer-table img {
      width: 100%;
      max-width: 670px;
      height: auto;
    }

    td {
      padding: 0;
    }

    p {
      margin: 0;
    }

    a {
      color: #f1f1f1;
      text-decoration: none;
    }

    .main-table {
      width: 100%;
      max-width: 610px;
      margin: 0 auto;
      border-radius: 6px;
      margin-top: 25px;
      margin-bottom: 25px;
      background: #fff;
    }

    .three-column {
      width: 100%;
    }

    .three-column img {
      width: 120px;
    }

    .section {
      /* Change display to inline-block on mobile */
      width: 100%;
      display: inline-flex;
      margin-top: 15px;
      margin-left: 30px;
    }

    .section .pic-container {
      display: inline-block;
    }

    .section .desc-container {
      margin: auto;
    }

    .desc-container td {
      padding-bottom: 25px;
    }

    .desc-container .content {
      margin-top: 32px;
    }

    .desc-table p {
      margin-top: 5px;
      margin-bottom: 10px;
    }

    .desc-table .h3 {
      font-weight: bold;
      text-transform: uppercase;
      color: #424B54;
    }

    .desc-table .price {
      font-size: 20px;
      font-family: 'Libre Baskerville', serif;
      color: #7FC29B;
    }

    .button-container {
      margin-right: 90px;
      margin-top: 65px;
      height: 35px;
    }

    .btn-holder {
      font-size: 25px;
      padding: 9px;
      border-radius: 25px;
      color: #fff;
      background: #4C4B63;
      text-decoration: none;
    }

    .outer-table-2 {
      width: 100%;
      max-width: 670px !important;
      background: #fff;
      border-top: 3px solid #D4F5F5;
      border-bottom: 3px solid #D4F5F5;
    }

    .call-to-action {
      width: 100%;
      max-width: 670px;
      text-align: center;
    }

    .cta-text {
      font-size: 24px;
      margin-top: 30px;
      margin-bottom: 30px;
      color: #4C4B63;
    }

    .cta-button {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .outer-table-3 {
      margin-top: 30px;
      width: 100%;
      max-width: 670px;
      background: #4C4B63;
      border-top: 2px solid #7FC29B;
      border-radius: 6px 6px 0 0;
    }

    .footer-table {
      width: 100%;
      margin-top: 32px;
    }

    .footer-header-table {
      width: 100%;
    }

    .footer-header {
      color: #fff;
      text-align: center;
    }

    .footer-header .heart {
      color: red;
    }

    .footer-logo-table {
      float: left;
    }

    .footer-logo {
      width: 67px;
    }

    .footer-social-table {
      width: 100%;
      text-align: center;
    }

    .social-list {
      display: inline-flex;
      list-style: none;
    }

    .social-list li {
      margin-left: 10px;
      margin-right: 10px;
    }

    .social-list img {
      width: 55px;
    }

    .footer-text-table {
      float: right;
      text-align: right;
      margin-top: 25px;
    }

    .footer {
      font-size: 12px;
      color: #fff;
    }

    .footer a {
      text-transform: uppercase;
      color: red;
    }

    @media only screen and (max-width:360px) {
      .cta-button .btn-holder {
        font-size: 18px !important;
      }

      .footer-social-table {
        width: 100%;
      }

      .social-list img {
        width: 50px;
      }
    }

    @media only screen and (max-width:768px) {
      .wrapper {
        overflow: hidden;
      }

      .section {
        display: inline-block;
        margin: 0;
        margin-top: 15px;
        text-align: center;
      }

      .pic .content {
        width: 100%;
      }

      .section .home {
        width: 65%;
      }



      .desc-container {
        width: 100%;
      }

      .desc-table {
        margin: 0 auto;
      }

      .desc-table .h3 {
        font-size: 20px;
      }

      .desc-table .price {
        font-size: 24px;
      }

      .size {
        font-size: 20px;
      }

      .section .button-container {
        margin-top: 25px;
        margin-bottom: 25px;
        width: 100%;
      }

      .button-container .button-table {
        margin: 0 auto;
        padding-bottom: 25px;
      }

      .outer-table-2 {
        width: 100%;
      }

      .cta-button .btn-holder {
        font-size: 23px;
      }

      .outer-table-3 {
        width: 100%;
      }

      .footer-social-table {
        width: 100%;
      }

      .social-list {
        padding: 0;
      }
    }
  </style>
</head>

Я подумал, что это потому, что это был экран @media, и это должен был быть либо "@media only screen", либо "@media () {...", но никто из них ничего не сделал.

То, что я ожидал (работает в веб-браузере) против того, что на самом деле происходит (приложение gmail) image

Вот ссылка на весь код: JSFiddle

Даже если вы не можете помочь, спасибо, что прочитали.

ОБНОВЛЕНИЕ !!!
Благодаря Digital_Frankenstein я смог решить проблему. То, что я должен был сделать, это добавить некоторые теги !important в мой CSS, и особенно в медиа-запросах. Для будущих разработчиков электронной почты HTML, не забудьте об этом. Потому что это действительно важно.

1 Ответ

1 голос
/ 30 апреля 2019

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

Чтобы решить ваши проблемы в Gmail:

  1. Вам нужно добавить! Важное для всех CSS медиазапросов, чтобы переопределить стиль по умолчанию.
  2. Ваш slogan-hr выталкивал все из-за своей базовой ширины.В ваш медиа-запрос я добавил переопределение ширины: 90%! Important;.
  3. Вам нужно уменьшить размер шрифта вашей последней кнопки.Это дует на 23px в Gmail.Возможно, я бы предложил 20px?
  4. Ваш нижний колонтитул выглядит не слишком хорошо.Лучше всего, если вы возитесь с этим дальше, поскольку оба предмета, стоящие вплотную к краям, выглядят не очень хорошо.

Наконец, я бы рекомендовал избегать этой техники, если вы не совсем уверены в ней.Лично я не вижу в этом смысла, так как Gmail начал отображать адаптивный код, но я знаю, что некоторые разработчики используют его для внешних клиентов мобильной электронной почты, и это имеет смысл.Но я придерживаюсь таблиц старой школы, так как это просто работает, и мои клиенты будут управлять шаблонами.Если бы я всегда был доступен для обновления и управления шаблонами, которые я создаю, это имеет смысл.Просто пища для размышлений.Надеюсь, что это решит ваши проблемы:)

...