个人中心
gpt4 book ai didi

html - iPhone 电子邮件上的 100% 宽度

转载 作者：太空宇宙 更新时间：2023-11-04 13:17:17 25 4
gpt4 key购买 nike

我正在制作一封 HTML 电子邮件，以便在人们使用联系表单时从我的网站发送，并且通过我所做的所有测试，我已经设法消除了许多错误，但尽管进行了多次尝试并进行了大量搜索，我似乎无法让我的电子邮件在 iPhone 上占据 100% 的宽度。

这是问题的屏幕截图:http://i62.tinypic.com/2r6mh5y.png

这是我正在使用的代码的副本:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="format-detection" content="telephone=no">
        <title></title>
        <style type="text/css">
            html, body { width: 100% !important; }
            p { font-family: Arial; }
            a { font-family: Arial; }
            td { font-family: Arial; }
        </style>
    </head>
    <body bgcolor="#000000" style="font-family:Arial; min-width:100%; background-color:#000000; margin:0; padding:0;" topmargin="0">
        <table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/top_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>&nbsp;</td>
                <td width="600" height="130" align="center" valign="middle">
                    <img src="http://newsite.moninfolettre.ca/images/courriel/logo_courriel.png" alt="Geant du web - Infolettre" width="168" height="61" style="font-size:18px; font-family:Arial; color:#FFFFFF;" />
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <table width="100%" bgcolor="#CD0C11" style="width:100%; background-color:#CD0C11" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td height="4" style="font-size:1px;-webkit-text-adjust:none;">&nbsp;</td>
            </tr>
        </table>

        <table width="100%" bgcolor="#F2F2F2" style="width:100%; background-image:url(http://newsite.moninfolettre.ca/images/courriel/shadow.jpg); background-position:center top; background-repeat:repeat no-repeat; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>&nbsp;</td>
                <td width="520">
                    <table>
                        <tr>
                            <td style="font-size:32px; padding:20px 0 0; white-space:nowrap;">Votre transaction est</td>
                        </tr>
                        <tr>
                            <td style="font-size:32px; font-weight:900; color:#E30512; padding:0 0 15px; white-space:nowrap;">
                                complétée avec succès !!
                            </td>
                        </tr>
                    </table>
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <table width="100%" bgcolor="#FFFFFF" style="width:100%; background-color:#FFFFFF" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>&nbsp;</td>
                <td width="520" style="padding:20px 0 0; color:#5A5A5A">
                    <p style="margin:0 0 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <p style="margin:20px 0;">Praesent nulla felis, malesuada eu sapien vitae, pretium dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam faucibus dui in est euismod, at sollicitudin elit aliquam. Nulla augue ante, tincidunt vel sodales id, tincidunt non nibh.</p>
                    <p style="margin:20px 0;">In hac habitasse platea dictumst. Aliquam feugiat aliquam tortor, id vestibulum dui rutrum vel. Nulla tincidunt, tortor vitae iaculis scelerisque, ipsum augue gravida ipsum, ac faucibus mauris urna et tortor.</p>
                    <p style="margin:20px 0;">Duis luctus pretium turpis, sed iaculis mauris commodo at. Aliquam dictum venenatis enim et tincidunt. In hac habitasse platea dictumst. Sed viverra laoreet neque, vel sodales tellus luctus vitae.</p>
                    <p style="margin:20px 0;">Merci d'avoir fait confiance à <strong style="font-weight:900;">GÉANT DU WEB !</strong></p>
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <table width="100%" bgcolor="#F2F2F2" style="width:100%; background-color:#F2F2F2" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>&nbsp;</td>
                <td width="600">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="40">&nbsp;</td>
                            <td width="260" style="padding:30px 0 20px;">
                                <table>
                                    <tr>
                                        <td style="padding:0 0 10px;">Accèdez dès maintenant à</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table width="165" height="35" bgcolor="#E30512" style="width:165px; background-color:#E30512; border-radius:10px;">
                                                <tr>
                                                    <td align="center" valign="middle" style="font-size:14px; font-weight:900; text-transform:uppercase;">
                                                        <a href="#" style="text-decoration:none; color:#FFFFFF;">Votre compte</a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="padding:20px 0 10px;">ou contactez notre équipe:</td>
                                    </tr>
                                    <tr>
                                        <td style="color:#5A5A5A;">Sans frais</td>
                                    </tr>
                                    <tr>
                                        <td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 10px;">1-888-86-GÉANT</td>
                                    </tr>
                                    <tr>
                                        <td style="color:#5A5A5A;">Montréal</td>
                                    </tr>
                                    <tr>
                                        <td style="font-size:24px; font-weight:900; color: #E30512; line-height:100%; padding:0 0 20px;">(514) 359-2949</td>
                                    </tr>
                                    <tr>
                                        <td>Besoin de <a href="#" style="font-weight:bold; color:#000000;">Support en ligne</a> ?</td>
                                    </tr>
                                </table>
                            </td>
                            <td width="300" valign="bottom" style="padding:0px;">
                                <img src="http://newsite.moninfolettre.ca/images/courriel/robot.jpg" alt="" style="display:block;" width="300" height="280" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>

        <table width="100%" bgcolor="#000000" style="width:100%; background-color:#000000; background-image:url(http://newsite.moninfolettre.ca/images/courriel/bottom_bg.jpg); background-position:center top; background-repeat:repeat repeat;" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>&nbsp;</td>
                <td width="600" height="100" align="center" valign="middle">
                    <a href="www.moninfolettre.ca" style="font-size:24px; text-decoration:none; text-transform:uppercase; color:#FFFFFF;">
                        <span style="color:#FFFFFF;">www.moninfolettre.ca</span>
                    </a>
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

最佳答案

任何你想要宽度为 100% 的元素，添加一个额外的基于像素的 min-width

例如:

width: 100%;
min-width: 600px;

或内联 <table style="min-width: 600px; width: 100%;" width="100%">

为了额外的保证，我将 width 属性加倍。你永远不知道... :)

关于html - iPhone 电子邮件上的 100% 宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23784472/

25 4 0
文章推荐： java - android.view.InflateException : Binary XML file line #91: Binary XML file line #91: Error inflating class
文章推荐： java - 将 Html String 内容转换为 java Map
文章推荐： c++ - 如何在c++中使用std::transform？
文章推荐： java - 什么处理了转换异常？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com