【问题标题】:HTML Email does not show properly in mobile devices [duplicate]HTML 电子邮件在移动设备中无法正确显示 [重复]
【发布时间】:2013-06-05 21:46:30
【问题描述】:

我正在尝试制作一个简单的 HTML 电子邮件。 90% 的时间都可以正常显示。当我使用 Gmail APP 以纵向查看电子邮件时,它没有正确显示(通过浏览器的 Gmail 工作正常)。横向可以,纵向不行。寻找解决方案,我意识到问题是字体大小被调整大小并调整到屏幕。

有人知道如何强制设备保留原始字体大小吗?如果电子邮件的宽度不适合屏幕的宽度,则不是问题。我只想保留电子邮件的原始样式,即使电子邮件比屏幕宽。

这就是电子邮件的显示方式 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>

【问题讨论】:

  • 一些代码会很好,这样我们就可以重现、检查和测试。您是否使用百分比宽度的表格?
  • 表格:宽度 600 像素。我试过百分比,但风格有点乱。你觉得这个百分比能解决问题吗?

标签: html email mobile


【解决方案1】:

您使用的是静态宽度,这就是为什么在手机应用上它对于屏幕来说太大了。尝试使用百分比并测试结果。使电子邮件看起来不错是非常困难的,因为它与编写响应式网站的代码不同。

这是一个关于 HTML 电子邮件http://hub.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908的有用链接

【讨论】:

  • 谢谢马蒂亚斯,我要试试百分比。我会带着结果回来的:)
  • 祝你好运 Redder,我花了大约 20 个小时来创建一个可用于跨设备和浏览器的电子邮件模板。慢慢来:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-03-14
  • 2016-05-03
  • 2013-01-05
  • 2013-06-06
  • 2016-11-05
  • 2011-04-10
  • 1970-01-01
相关资源
最近更新 更多