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

Question

I'm having difficulty with getting a media query for a HTML email to render on the iPhone properly. 我很难获得媒体查询以获取HTML电子邮件以正确显示在iPhone上。 Here's a hosted screenshot: 这是一个托管的屏幕截图：

在此处输入图片说明

I tested on Android and the footer stacks but for some reason on iPhone it's not. 我在Android和页脚堆栈上进行了测试，但由于某些原因在iPhone上没有进行测试。 Here's the code for the footer section: 这是页脚部分的代码：

  @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>

In the iPhone rendering, all of the text crams next to each other and every letter of each word is stacked vertically. 在iPhone渲染中，所有文本框都彼此相邻，每个单词的每个字母都垂直堆叠。

Any help would be much appreciated! 任何帮助将非常感激！

Answer 1

I tested the code in litmus and broswerstack didn't have any problem. 我在石蕊和broswerstack中测试了代码，没有任何问题。 can you check this code below and see if it works for you? 您可以在下面检查此代码，看看是否对您有用吗？

I only added the meta tags and changed the media query. 我只添加了元标记并更改了媒体查询。

Code: 码：

 <!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>

check these screenshots: 查看以下屏幕截图：

Screenshot 1 屏幕截图1

Screenshot 2 屏幕截图2

Screenshot 3 屏幕截图3

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

问题描述

1 个解决方案

解决方案1
0 2018-06-02 04:08:56

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

问题描述

1 个解决方案

解决方案1 0 2018-06-02 04:08:56

解决方案1
0 2018-06-02 04:08:56