HTML电子邮件无法在移动设备中正常显示

时间:2013-06-10 09:14:50

标签: html email mobile

我试图制作一个简单的HTML电子邮件。它可以在90%的时间内显示出来。当我使用Gmail APP 以纵向查看电子邮件时,它显示不正确(通过浏览器gmail工作正常)。它的风景很好,但没有肖像。在搜索解决方案时,我意识到问题是字体大小已调整大小并调整到屏幕。

任何人都知道如何强制设备保留原始字体大小?如果电子邮件的宽度不适合屏幕的宽度不是问题。我只想保留电子邮件的原始风格,即使电子邮件比屏幕更广。

这就是电子邮件应该如何显示的方式 http://i.imgur.com/MfGT5yC.png

这就是gmail app在纵向方向上显示的方式 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>

1 个答案:

答案 0 :(得分:0)

你正在使用静态宽度,这就是为什么在手机应用程序中,它对于屏幕来说太大了。尝试使用百分比并测试结果。使电子邮件看起来很好很难,因为它与编码响应式网站不同。祝好运!测试并有耐心。

以下是有关HTML电子邮件http://hub.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908

的有用链接