html - Outlook の HTML メールの巨大なフォント

Question

複数の電子メールクライアント用にHTMLで電子メールニュースレターをデザインしています。これまでのところ、Outlookを除くすべてのクライアントで動作します...

フォントが大きくなりすぎて、表などが壊れます。私は既にどこでもCSSインラインを提供し、Outlook 用のいくつかの CSS トリックを追加しました。私はこれに対する解決策がありません。これがコードです。

<!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="format-detection" content="telephone=yes">
        <meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
        <title>Untitled Document</title>
        <style type="text/css">
            /* Client-specific Styles */
            #outlook a{padding:0;}

            body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}

            body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}

            p {
                margin: 1em 0;
            }

            h1, h2, h3, h4, h5, h6 {
                color: black !important;
                line-height: 100% !important;
            }

            h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
                color: blue !important;
            }

            h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
                color: red !important;
            }

            h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
                color: purple !important;
            }

            table td {
                border-collapse:collapse;
            }
            .yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;}

            .ExternalClass {
                width:                        100%;
            }
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height:                 100%;
            }
            .ExternalClass{display:inline-block; line-height: 131%};
            .ExternalClass {width: 100%;}
            .ReadMsgBody{width: 100%;}
            table td {
                border-collapse:            collapse;
            }
            body {
                margin:                         0;
                padding:                        0;
                width:                       100%;
                overflow-y:                hidden;
                background-color:         #000000;
                -webkit-text-size-adjust:    100%;
                -ms-text-size-adjust:        100%;
                font-family:            Helvetica;
                vertical-align:               top;
                border-spacing:               0px;
                color:                    #ffffff;
            }
            p {
                margin-bottom:               10px;
                margin-left:                 35px;
                margin-right:                35px;
            }
            .container {
                width:                      600px;
                background-color:            #000;
                margin:                    0 auto;
            }
            a:link {
                color:                    #ffffff;
                text-decoration:        underline;
            }
            a:visited {
                color:                    #6E6C64;
                text-decoration:        underline;
            }
            a:hover, a:active, a:focus {
                text-decoration:             none;
            }
        </style>
    </head>

    <body margin="0" padding="0" width="100%" style="overflow-y:hidden; background-color:#000000; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;  font-family:Helvetica; vertical-align:top; border-spacing:0px; font-size:1em;">
        <table class="container" width="600px" background-color="#000000" margin="0 auto" cellpadding="0" cellspacing="0">
            <tr width="600px">
                <td style="line-height:10px;" width="600px"><img src="http://mediabunker.com/email/header.png" align="absbottom"></td>
            </tr>
            <tr bgcolor="#f8f8f8" width="600px">
                <td style="font-family:Helvetica; font-size:1em;" width="600px">
                    <h1 align="center" style="color:#000000;">Need apps? We build ‘em.</h1>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Het gebruik van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Mocht u geïnteresseerd zijn in onze service, van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op. U bent van harte welkom voor een kop koffie bij ons in de Suikersilo's, tijdens een verkennend gesprek of een demonstratie van de mogelijkheden van apps voor mobiel, tablets, tv en het web.</p>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; margin-bottom:60px; font-size:1em;">Alvast bedankt en hopelijk tot ziens.</p>
                </td>
            </tr>
            <tr width="600px">
                <td><img src="http://mediabunker.com/email/title.png" align="absbottom"></td>
            </tr>
            <tr bgcolor="#232323" width="600px">
                <td style="font-family:Helvetica; font-size:1em;">
                    <table height="auto" border="0" cellpadding="5px" margin-top="0" align="center" style="color:#fff;">
                        <tr align="center">
                        <td align="center"><img src="http://mediabunker.com/email/apple.png"/></td>
                        <td align="center"><img src="http://mediabunker.com/email/android.png"  /></td>
                        </tr>
                      <tr>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Apple iOS de kracht achter<br />
                          de iPhone, iPod en iPad.</td>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Android is met Google, HTC en<br />
                                            Samsung, het meest gebruikte<br />
                                            mobiele besturingssysteem.</td>
                        </tr>
                      <tr>
                        <td align="center"><img src="http://mediabunker.com/email/windows.png" /></td>
                        <td align="center"><img src="http://mediabunker.com/email/html.png" /></td>
                        </tr>
                      <tr>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Microsoft en Nokia bieden<br />
                          samen de Windows Phone, <br />
                          voor de conventionele liefhebbers.</td>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Ook een mobiele web app<br />
                          in HTML5 en CSS3<br />
                          is geen probleem!</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr width="600px">
                <td><img src="http://mediabunker.com/email/actie.png" align="absbottom"></td>
            </tr>
            <tr width="600px">
                <td>
                    <table border="0" HALIGN="center" style="margin-bottom:30px; margin-top:20px;">
                      <tr align="center">
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><font color="white">Suikersilo-West 23 <br />1165 MP Halfweg</font></td>
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></td>
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></td>
                      </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

そしてオンライン版FWIW ; http://mediabunker.com/email/email.html。そして、誰かが送ってくれたスクリーンショットを簡単にアップロードします。これが最新の Outlook バージョンだと思います。

ここに画像の説明を入力してください

score 1 · Accepted Answer

簡単な回答:
HTML メールではヘッダータグを使用しないでください。一部のクライアントは、宣言方法に関係なく、ヘッダータグを使用してスタイリングを台無しにします。

h1タグを外す
問題のあるテキストを囲む TR タグからすべてのスタイルを削除し、代わりにそのスタイルを td タグに配置します。
その要素の周りの幅を完全に削除し、text-align に置き換えます。

長い答え:

CSS の代わりに、可能な限り減価償却済みの HTML タグを使用してください。
1. body bgcolor="" の代わりに style="background-color..
2. margin="0 auto" の代わりに td margin="0" (より良い.. 代わりに cellpadding を使用してください)
修理
1. width="5px" .. 減価償却された html のサイズに px を書き込まないでください (cellpadding についても同様です)。
2. margin="0 auto" .. 短縮コードを使用しないでください
3. line-height .. 適切な書式設定のために使用している場合は、純粋にスタイリングに使用している場合を除き、 line-height を使用しないでください.. 機能することを期待しないでください。
4. h1、h2、h3、h4、h5、h6 .. それらを使用しないでください。
5. p .. 段落を使用せず、スタイルを td に配置し、各段落を p ではなく td でラップします。

body タグまでのすべての head CSS をこのコードに置き換えます。さらに CSS を head に追加する必要があると思われる場合は、そうしないでください。あなたがはるかに熟練するまでは。これはあなたを助けるはずです..

    <style type="text/css">
        /* Client-specific Styles */
        html>body {width:100% !important;-webkit-text-size-adjust:100%;margin:0;padding:0;}
        body, div, p, a, li, td{-webkit-text-size-adjust:none;}
        .ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
        .ExternalClass * {line-height: 100%} 
        #outlook a {padding:0;}
        table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
        table td {border-collapse: collapse;}
        img {outline:none;text-decoration:none;-ms-interpolation-mode: bicubic;display:block;}
        a img{border:none;}
        p{margin: 1em 0;}
        a {color:#ffffff;}
        a:link{color:#ffffff;}
        a:visited{color:#ffffff;}
        a:hover{color:#ffffff;}
        .yshortcuts a { border-bottom: none !important;}

    </style>
</head>
<body bgcolor="#000000" style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;color:#252525;font-family:Arial,sans-serif;" border="0">

score 1 · Accepted Answer

最初に: HTMLメールを送信するときにCSSクラスを使用するのは得策ではありません。これらは、Outlook を含む多くのクライアントで削除または無視されます。

あなたの問題に関して：私には、の幅がtd適切に設定されていないようです。あなたのソースコードを調べると、テーブルの幅とを次のように定義してtrいtdます。

width="600px"

これは

width="600"

代わりは。ただし、さらに重要なことは (Outlook は表の HTML 属性を無視することがあるため)、次のように要素にインライン CSS を追加することです。

style="width: 600px"

td表のセル ( ) と親表を忘れないでください。

そうすべきだと思います。

html - Outlook の HTML メールの巨大なフォント

2 に答える 2

Related

Reference