草庐IT

iPhone 上的邮件应用程序中的 HTML 电子邮件字体不缩放

coder 2023-08-08 原文

我需要创建一个电子邮件模板。我的电子邮件模板必须适用于 GMail 和 iPhone 上的邮件应用程序。我使用 Zurb Ink 使模板在 iPhone 上的邮件应用程序中正常工作。但是，Gmail 不支持 HTML 电子邮件中的 style 标签。出于这个原因，我删除了那个框架并从头开始。现在，电子邮件模板在 GMail 中运行良好，但文本在 iPhone 上的邮件应用程序中无法放大。文字都挤在一起。目前，我的 HTML 看起来像这样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;" height="100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Welcome.</title>
</head>

<body style="background-color:silver; color: #2D2D2D; font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; padding:0; margin: 0; text-align: left; line-height: 1.3; width:100%; height:100%; min-width: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; ">
  <table style="border:solid 0px #fff; width:100%;">
    <tr>
      <td align="center" valign="top" style="width: 100%;">
        <center>
          <table style="width:600px; border:solid 0px #fff; border-collapse: collapse;">
            <tr>
              <td align="right" style="text-align: right; vertical-align: middle;">
                <span style="color: #898989; font-size:12px;">Trouble viewing email? <a href="#" style="color: #6B6B6D; text-decoration:underline;">view it in your browser</a></span>
              </td>
            </tr>

            <tr>
              <td style="height:77px; vertical-align: middle; padding-left:35px; background-color:#fff; border-left: solid 1px #D6D6D6; border-right:solid 1px #D6D6D6;">
                <img alt="Welcome." src="http://dummyimage.com/126x36/d907d9/fff.png&text=Hello" height="36" width="126" />
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <img alt="Welcome." width="600" height="250" src="http://dummyimage.com/600x250/d907d9/fff.png&text=Welcome+to+the+new" style="display:block;" />
                            </td>
                        </tr>

                        <tr>
                            <td style="padding:0px 32px 36px 32px; background-color:#fff; border-top:solid 0px #fff;">
                                <div style="color:#92cc0a; padding-top:29px; font-size:36px; font-weight:lighter;">Welcome.</div>
                                <div style="padding-top:15px; font-size:14px; color:#363636;">
                                    Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!
                                </div>

                                <br />
                                Thank You
                            </td>
                        </tr>
                    </table>
                </center>
            </td>
        </tr>
    </table>
</body>

为什么 iPhone 上的邮件应用程序中的文本缩放不正确。我已经包含了视口(viewport)详细信息。我已经包括了 webkit-text-adjust 的东西。有人可以帮帮我吗？

非常感谢!

最佳答案

您实际上不能依赖继承的样式，这意味着您必须始终将每个样式应用于每个元素... 这意味着 div 上的字体大小实际上不会对其内的文本产生任何影响。

为了快速解决问题，我建议将文本包装在一个段落中并对其应用所需的样式。

<div style="padding-top:15px; font-size:12px; color:#363636;">
  <p style="font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; font-size: 26px; line-height: 36px;">Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!</p>
</div>

通常我会建议在样式标签中编写样式，然后使用类似 http://inliner.cm 的服务当您完成并准备好内联样式以支持 gmail 时。这样你就不必自己到处复制和粘贴字体系列和默认样式

使用建议的方法在 <style> 中设置您的 html 电子邮件的样式标记在头部然后使用内联器，您实际上也可以返回使用 ink 框架并且仍然可以在 gmail 中工作。

关于iPhone 上的邮件应用程序中的 HTML 电子邮件字体不缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22635168/

iPhoneHTML34gtltcsshtml-email

有关iPhone 上的邮件应用程序中的 HTML 电子邮件字体不缩放的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  3. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代

  4. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  5. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  6. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  7. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  8. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  9. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  10. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

随机推荐