HTML 电子邮件 iPhone 媒体查询全宽 TD 不起作用

Question

我在获取要在 iPhone 上正确呈现 HTML 电子邮件的媒体查询时遇到了困难。这是托管的屏幕截图：

我在 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

我在 litmus 中测试了代码，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>

查看这些屏幕截图：

Screenshot 1

Screenshot 2

Screenshot 3