ActionMailer 电子邮件预览与一位用户在生产中收到的不同答案

【问题标题】：ActionMailer email preview is not the same as one user receives in productionActionMailer 电子邮件预览与一位用户在生产中收到的不同
【发布时间】：2021-01-04 00:13:25
【问题描述】：

当用户加入时，我正在使用 Rails 6 和 ActionMailer 发送电子邮件。提到我只使用 API 应用程序并将其托管在 Heroku 上可能也很重要。

我有一个.html.erb 视图设置，它看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
  <div style="width: 100%;display: flex;flex-direction: column;align-items: center;padding: 15px;background-color: white;font-family: 'Helvetica';color: #2c3e50">
    <h1>Welcome to company!</h1>

    <div style="height: 1px;background-color: dimgrey;width: 50%;margin-top: 10px; margin-bottom: 20px;"></div>

    <h4 style="margin:0">Want to learn more about our platform?</h4>
    <p style="margin-bottom: 30px">Check out <a href="#">this</a> quick video guide.</p>

    <h4 style="margin:0">Join our Discord server</h4>

    <h4 style="margin:0">Follow us on social media</h4>
    <p style="margin-bottom: 30px">Some icons with social media</p>


    <%= link_to "Create Password", @url, style: "color: white;padding:10px;border-radius:10px;margin-bottom:20px" %>
  </div>
</body>
</html>

现在，预览中的这段代码将提供这种视图

这很好，这就是我想要的。

但是当用户在生产中收到它时，它看起来像这样

我是否使用了我不应该使用的东西？如何让它看起来像预览中的样子。

这里还有一些您可能感兴趣的文件：

我添加到 production.rb 的有关邮件的内容：

  config.action_controller.asset_host = 'https://myapponheroku'
  config.action_mailer.asset_host = config.action_controller.asset_host

  config.action_mailer.perform_caching = false

  config.action_mailer.delivery_method = :smtp
  host = 'myapponheroki'
  config.action_mailer.default_url_options = { host: host }

  # smtp settings here

我是否必须在此处添加任何其他内容才能使其正常工作？

我的邮件位于app/views/user_mailer

如果您需要更多代码 sn-ps 或信息，请询问。

【问题讨论】：

标签： ruby-on-rails email actionmailer rails-api

【解决方案1】：

该屏幕截图使用的是什么电子邮件客户端？可能只是电子邮件客户端问题和灵活性。也许要调试，您可以更改视图以仅使用常规表，看看是否可以修复格式。

此外，我过去曾成功使用过这些。大多数主要的电子邮件客户端通常都能很好地处理它们。

https://litmus.com/community/templates

【讨论】：

那个不工作/奇怪的放置是从GMail查看的，正确的只是在localhost中预览。我会看看这个链接，看看它是怎么回事。谢谢
所以我猜问题出在 flexbox 中。表格链接中的模板完美运行！
是的，电子邮件客户端很奇怪。表格通常有助于全面获得类似的结果。很高兴你明白了！