iPhone5和6图像缩放问题

时间：2015-12-11 15:39:27

标签： html html-email

我正在制作一封包含两行三张图片的电子邮件。它适用于所有电子邮件客户端，直到我到达iPhone5,6和6s，在iPhone5中，前两个图像似乎比最后一个图像更缩小。在第一行和第二行之间画一条白线。（见附图）。 在iPhone6和6s中，它只是导致此问题的第一个图像。 这也是代码。 我试图将所有图像放在单独的表格中，为各个表格，TD和图像标签添加宽度，我甚至将PX变为百分比，似乎没有任何工作。有人有任何想法吗？

干杯

    <table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="100plr">
                <tr>
                    <td width="11" class="hide"></td>
                    <td valign="top" align="center">
                        <table width="579" border="0" cellpadding="0" cellspacing="0" class="100p">
                            <tr>
                                <td valign="top" align="center">
<!--                                Row one-->
                                    <table width="579" border="0" cellpadding="0" cellspacing="0" class="100p">
                                        <tr>
                                            <td valign="top" align="center">
                                                <a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
                                            </td>
                                            <td valign="top" align="center">
                                                <a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
                                            </td>
                                            <td valign="top" align="center">
                                                <a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p"/></a>
                                            </td>
                                        </tr>
                                    </table>
<!--                                End of Row one-->

<!--                                Row two-->
                                    <table width="579" border="0" cellpadding="0" cellspacing="0" class="100p">
                                        <tr>
                                            <td valign="top" align="center">
                                                <a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
                                            </td>
                                            <td valign="top" align="center">
                                                <a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
                                            </td>
                                            <td valign="top" align="center">
                                                <a href="##" target="_blank" style="text-decoration:none;"><img src="http://uploadlibrary.com/emosaic/martin/kuoni/html/images/img388x344.jpg" alt="" border="0" style="display:block;" class="100p" /></a>
                                            </td>
                                        </tr>  
                                    </table>    
<!--                                End of Row two-->
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="10" class="hide"></td>
                </tr>
            </table>   





   <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>email template</title>
    <style>


         @import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/

        /* Some resets and issue fixes */
        #outlook a { padding:0; }
        body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }     
        .ReadMsgBody { width: 100%; }
        .ExternalClass {width:100%;} 
        .backgroundTable {margin:0 auto; padding:0; width:100%;!important;} 
        table td {border-collapse: collapse;}
        .ExternalClass * {line-height: 115%;}   
        a:visited{color:#dddbdc;text-decoration:none;}
/*      div, p, a, li, td { -webkit-text-size-adjust:none; }*/

        /* End reset */

        @media screen and (max-width: 630px){


            *[class="mobile-column"] {display: block;} 

            *[class="mob-column"] {float: none !important;width: 100% !important;}          
            *[class="hide"] {display:none !important;}          

            *[class="100p"] {width:100% !important; height:auto !important;}                    

            *[class="condensed"] {display: block;}

            *[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}            

            *[class="100pad"] {width:100% !important; padding:20px;} 

            *[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;} 

            *[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;} 

            *[class="padleft50p"] {text-align:left !important;}


            *[class="100grad"] {width:100% !important; height:1px !important;}

            *[class="cwNumbs"] {font-size:40px !important;}

        }

        @media screen and (max-width: 414px) {
            *[class="100p"] {width: 100% !important; height:auto !important;}
            *[class="100pm"] {width: 100% !important; height:auto !important;}
            *[class="100plr"] {width: 100% !important; height:auto !important; padding: 0 20px 0 20px;}
            *[class="100prl"] {width: 100% !important; height:auto !important; padding: 0 20px 0 20px;}
            *[class="100plrn"] {width: 100% !important; height:auto !important; padding: 0 70px 0 70px;}
            *[class="100pr"] {width: 100% !important; height:auto !important; padding: 0 30px 0 0;}
            *[class="100pt"] {width: 100% !important; height:auto !important; padding: 10px 0 0 0;}
            *[class="100pb"] {width: 100% !important; height:auto !important; padding: 0 0 20px 0;}
            *[class="100pbn"] {width: 100% !important; height:auto !important; padding: 0 0 30px 0;}
            *[class="100pad"] {width: 100% !important; height:auto !important; padding: 20px 20px 20px 20px;}
            *[class="hide"] {display:none !important;}
            *[class="center"] {text-align:center !important;}
            *[class="mobile"] {width: 100% !important; height:auto !important; display:block !important; max-height:none !important;}
            *[class="heading1"] {font-size: 29px !important;}
            *[class="heading2"] {font-size: 26px !important;}
            *[class="heading3"] {font-size: 15px !important;}
            *[class="heading4"] {font-size: 17px !important;}
            *[class="apptext"] {font-size: 15px !important;}
            *[class="text"] {font-size: 20px !important;}

        }
        @media screen and (max-width: 373px) {
            *[class="heading1"] {font-size: 24px !important;}
            *[class="heading2"] {font-size: 22px !important;}
            *[class="heading3"] {font-size: 15px !important;}
            *[class="heading4"] {font-size: 15px !important;}
            *[class="apptext"] {font-size: 13px !important;}
        }
    </style>


</head>

Screenshot of issue

Screenshot of Code

1 个答案:

答案 0 :(得分：0)

在我的iOS模拟器（xcode中）中，iPhone 5S上连续三个相同图像的计算尺寸分别为93x82,93x82和94x83。表的计算大小为280px，除以3时为93.3333px。这可以解释为什么宽度不同。似乎iOS不会使用像素分数作为宽度，而其他一些客户端/浏览器则会。

在这种情况下我可能会做的是将图像隐藏在移动设备上，将它们移动到它所居住的锚标签的背景中，将锚点更改为宽度和高度为100％的显示块。

这里有一个关于分数宽度的探索：Are the decimal places in a CSS width respected?

相关问题
最新问题