HTML электронная почта iPhone медиа запрос полной ширины TD не работает

Question

У меня проблемы с получением медиазапроса для HTML-письма, которое правильно отображается на iPhone.Вот размещенный снимок экрана:

Я тестировал на Android и стопках нижнего колонтитула, но по какой-то причине на iPhone это не так.Вот код для раздела нижнего колонтитула:

    @media (max-width:480px) {
    .footerGrid{
        display: inline-block !important;
        font-size: 25px !important;
        width: 100% !important;
        padding: 20px 0 20px 0;
    }

    .line{
        display: none !important;
    }

    .responseFooter{
        width: 100% !important;
    }

    .footerGrid img {
        width: 25px !important;
    }

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0"> 
    <tbody> 
        <tr> 
            <td valign="top" align="center" style="padding: 0px" bgcolor=#000000> 
            <!--[if mso]> <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;"> <![endif]--> 
                <div style="min-width: 50px; min-height: 20px;width:100%; display: inline-block; text-align: center; vertical-align:top"> 
                    <table cellspacing="0" cellpadding="0" border="0"> 
                        <tbody> 
                            <tr> 
                                <td valign="top" align="center" style="padding:10px 10px"> 
                                    <div itm-edit="myedittext8" itm-footer="true"> 
                                        <table class="responseFooter" style="width: 575px;" width="100%"> 
                                            <tbody> 
                                                    <tr align="center"> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 37px;">Home</td> 
                                                    <td class="footerGrid line" style="width: 8px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 54px;">Locations</td> 
                                                    <td class="footerGrid line" style="width: 8px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 33px;">Menu</td> 
                                                    <td class="footerGrid line" style="width: 9px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 23px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image.png"></a></td> 
                                                    <td class="footerGrid line" style="width: 9px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 19px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image2.png"></a></td> 
                                                    <td class="footerGrid line" style="width: 3px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 17px;"><a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="image3/png"></a></td> 
                                                    <td class="footerGrid line" style="width: 5px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 72px;">Guest Feedback</td> 
                                                    <td class="footerGrid line" style="width: 6px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 46px;">Gift Cards</td> 
                                                    <td class="footerGrid line" style="width: 4px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 97px;">Update Your Account</td> 
                                                    <td class="footerGrid line" style="width: 7px; color: white;">|</td> 
                                                    <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 55px;">Unsubscribe</td> 
                                                </tr> 
                                            </tbody> 
                                        </table> 
                                    </div>
                                </td> 
                            </tr> 
                        </tbody> 
                    </table> 
                </div> 
            <!--[if mso]> </td></tr></table> <![endif]--> </td> 
        </tr> 
    </tbody> 
   </table>

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

Любая помощьбудет высоко ценится!

Answer 1

Я тестировал код в лакмусовой бумажке, и у broswerstack не было никаких проблем.Можете ли вы проверить этот код ниже и посмотреть, работает ли он для вас?

Я только добавил метатеги и изменил медиа-запрос.

Код:

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="pm-thumbnail-browser-dimensions" content="600x775" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Test</title>
  <style type="text/css">
    @media only screen and (max-width:480px) {
      .footerGrid {
        display: inline-block !important;
        font-size: 25px !important;
        width: 100% !important;
        padding: 20px 0 20px 0;
      }
      .line {
        display: none !important;
      }
      .responseFooter {
        width: 100% !important;
      }
      .footerGrid img {
        width: 25px !important;
      }
    }
  </style>

</head>

<body class="mobile">
  <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0">
    <tbody>
      <tr>
        <td valign="top" align="center" style="padding: 0px" bgcolor=#000000>
          <!--[if mso]> <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;"> <![endif]-->
          <div style="min-width: 50px; min-height: 20px;width:100%; display: inline-block; text-align: center; vertical-align:top">
            <table cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td valign="top" align="center" style="padding:10px 10px">
                    <div itm-edit="myedittext8" itm-footer="true">
                      <table class="responseFooter" style="width: 575px;" width="100%">
                        <tbody>
                          <tr align="center">
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 37px;">Home</td>
                            <td class="footerGrid line" style="width: 8px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 54px;">Locations</td>
                            <td class="footerGrid line" style="width: 8px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 33px;">Menu</td>
                            <td class="footerGrid line" style="width: 9px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 23px;">
                              <a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="http://via.placeholder.com/23/f3f"></a>
                            </td>
                            <td class="footerGrid line" style="width: 9px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 19px;">
                              <a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="http://via.placeholder.com/23/f3f"></a>
                            </td>
                            <td class="footerGrid line" style="width: 3px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 17px;">
                              <a href="#" style="color: white; text-decoration: none;font-family: arial;"><img src="http://via.placeholder.com/23/f3f"></a>
                            </td>
                            <td class="footerGrid line" style="width: 5px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 72px;">Guest Feedback</td>
                            <td class="footerGrid line" style="width: 6px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 46px;">Gift Cards</td>
                            <td class="footerGrid line" style="width: 4px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 97px;">Update Your Account</td>
                            <td class="footerGrid line" style="width: 7px; color: white;">|</td>
                            <td class="footerGrid" style="text-align: center; font-size: 10px; color: white; width: 55px;">Unsubscribe</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!--[if mso]> </td></tr></table> <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>

проверьте следующие снимки экрана:

снимок экрана 1

снимок экрана 2

Скриншот 3