Строка таблицы на Android 6 не занимает 100% ширины - PullRequest
Новая
       6

Строка таблицы на Android 6 не занимает 100% ширины

0 голосов
/ 01 мая 2018

У меня есть код ниже, используемый в html-письме, и он работает, как и ожидалось, во всех почтовых клиентах, кроме Android 6.0 Gmail! синяя кнопка «Свяжитесь с нами» не занимает 100% ширины.

Есть мысли?

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

Check screenshot here

This is how Litmus show but in reality its not

код: 

.cta {
  text-align: left;
  vertical-align: middle;
}

@media only screen and (max-width:414px) {
  .mobile {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
  <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#00a5c9; font-weight: normal;">
      <tr>
        <td class="cta" style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; padding: 10px; color: #FFFFFF; vertical-align: top; line-height: normal !important;">
          <a style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">CONTACT US</a>
        </td>
        <td style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="http://via.placeholder.com/25/0f0" /></td>
      </tr>
    </table>
  </td>
</tr>
</table>

Ответы [ 3 ]

0 голосов
/ 01 мая 2018

Некоторые версии Android и Gmail не используют медиазапросы.

Именно поэтому синяя кнопка контакта занимает только 1/3 экрана Android, но на устройствах IOS она занимает 100% экрана. IOS будет уважать медиазапрос, а Android будет использовать width="33%" из таблицы: 

<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">

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

Удачи.

0 голосов
/ 02 мая 2018

Хороший способ обойти это - заставить Android 5.1 и 6.0 отображать версию вашей электронной почты на рабочем столе. Приведенный ниже фрагмент кода нуждается в прозрачном png 600x1, который будет действовать как разделитель на всю ширину. Эта прокладка будет скрыта на всех мобильных клиентах, которые поддерживают медиазапросы и позволяют отображать мобильное представление. 

  <tr style="line-height: 1px; mso-line-height-rule: exactly;" class="mobilehide">
    <td align="center" style="min-width:600px;font-size:1px; line-height: 1px; mso-line-height-rule: exactly;">
      <img src="images/android-spacer.png" alt="" width="600" height="1" style="display: block;" border="0">
    </td>
  </tr>

Это следует добавить перед закрывающим тегом самой внешней таблицы (последним перед закрывающим телом) 

        </td>
      </tr>
    <!-- add here -->
    </table>
  </body>
</html>
0 голосов
/ 01 мая 2018

Вместо использования width: 100%;, попробуйте использовать width: 100vw;

...