0

シンプルな HTML メールを作成しようとしています。9割の確率でOK表示されます。Gmail APPを使用して電子メールを縦向きで表示すると、正しく表示されません (ブラウザ経由の Gmail は正常に動作します)。横向きではOKですが、縦向きではダメです。解決策を探していると、フォントサイズがサイズ変更されて画面に合わせて調整されることが問題であることに気付きました。

デバイスに元のフォントサイズを強制的に保持させる方法を知っている人はいますか? メールの幅が画面の幅に収まらなくても問題ありません。電子メールが画面よりも広い場合でも、電子メールの元のスタイルを維持したいだけです。

これは、電子メールが表示されるはずの方法です http://i.imgur.com/MfGT5yC.png

そして、これは縦向きのGmailアプリでどのように表示されるかです http://img208.imageshack.us/img208/8969/so2b.png

編集：

メインコードは次のとおりです。

    <table border="0" align="center" cellspacing="10" style="font-family: Calibri" width="600px">
    
        <!--   ****************** H E A D E R ****************** -->        
        <tr>
            <td colspan="2" style="width:600px;height:81">
                <img style="width:600px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/cabecera_principal.png">
            </td>
        </tr>           
        <!--   ****************** H E A D E R ****************** -->

        
        <!--   ****************** S U B - H E A D E R ****************** -->
        <tr>
            <td style="width:293px;">
                <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/cab1.png">
            </td> 
            <td style="width:293px;">
                <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/cab2.png">
            </td>
        </tr>
        <!--   ****************** S U B - H E A D E R ****************** -->
        
        
        <tr>
            <td colspan="2" width="600px" height="3px;">
                <img style="width:600px;height:2px" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/linea1.png">
            </td>
        </tr>
        
        <!--   ****************** NEWS ****************** -->
        <tr>
            <td valign="top" style="width:293px;">
                <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/not1.png">
            </td> 
            <td valign="top" style="width:293px;">
                <div valign="top" style="height:190px;">
                    <div style="height:160px;">
                        <!-- <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/linea_titulo1.png"> -->
                        <div id="dTitulo" align="justify" style="font-size:16px;">
                            <b>sadsa asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf dsadsadasd sadasdasdasdasd </b></p>
                        </div>          
                        <div id="dTexto" align="justify" style="font-size:14px;margin-top:5px;">
                            texto texto texto texto texto texto texto texto texto texto texto texto 
                        </div>
                    </div>
                
                    <div id="dLeerMas" valign="bottom" style="color:#2C89E3; text-align:right;">
                        <p>
                            <b><i>Leer más..</i></b>
                        </p>
                    </div>
                </div>      
            </td>
        </tr>
        <!--   ****************** NEWS ****************** -->

    </table>
4

1 に答える 1

0

静的な幅を使用しているため、携帯電話アプリでは画面に対して大きすぎます。パーセンテージを使用して、結果をテストしてみてください。電子メールの見栄えを良くすることは、レスポンシブ Web サイトのコーディングとは異なるため、非常に困難です。

HTML メールに関する便利なリンクは次のとおりですhttp://hub.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908

于 2013-06-10T11:29:07.760 に答える