簡體   English   中英

在 Mac 郵件中使用 Amazon SES 錯誤格式發送的 Rails 郵件

[英]Rails mails sent with Amazon SES wrong format in Mac mail

我在 Amazon EC2 實例中部署了一個 Rails webapp,它使用帶有標題和徽標的 html 電子郵件模板和 SES Amazon 電子郵件服務來發送通知電子郵件。

電子郵件已正確發送,並且它們在所有郵件客戶端(即 gmail、hotmail)甚至我的手機中都能完美顯示,但在 Mac 郵件中,徽標未正確顯示。

請看附上的截圖。

在此處輸入圖片說明

更新:我正在使用 Chrome 和 Gmail 帳戶進行測試。 如果我在兩個(Mac 郵件和 Chrome)中打開完全相同的電子郵件,我可以在 Chrome 中正確地看到它,但是,我在郵件中看到它是錯誤的。 我已經檢查過郵件中的 CSS 沒有遵守徽標大小。

請在 Chrome 中查看 Gmail 的屏幕截圖。 我在手機上也看到了。在此處輸入圖片說明

我附上 Rails 代碼以生成電子郵件:

在 email_service.rb 中:

  # booking request admin
  def send_booking_request_admin_notification(customer, provider, boat, booking)
    @customer = customer
    @provider = provider
    @boat = boat
    @booking = booking
    attachments.inline['logo.png'] = File.open("#{Rails.root.to_s + '/app/assets/images/logo.png'}", "rb") {|io| io.read}   
    mail(from: APP_CONFIG['YANPY_EMAIL_FROM'], to: APP_CONFIG['YANPY_EMAIL_FROM'], subject: t('booking_request_Yanpy_subject', user_email: customer.email , owner_email: provider.email, booking_code: booking.code))
  end

在 send_booking_request_admin_notification.erb 中:

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <link rel="stylesheet" type="text/css" href="https://s3-eu-west-1.amazonaws.com/yanpy.dev/css/emails.css">
  </head>
  <body>
    <div id="nav-bar">
        <%= image_tag attachments['logo.png'].url, alt: 'Yanpy', size: '87x30', :class => "logo" %>
    </div>
    <div id="mail-content">
        <h4><%= t('admin_hello') %></h4>
        <p><%= t('booking_request_Yanpy_content_1', user_email: @customer.email, boat_name: @boat.name , owner_email: @provider.email, booking_code: @booking.code) %></p>
        <p><%= t('admin_goodbye_1') %></p>
        <p><%= t('admin_goodbye_2') %></p>
    </div>
  </body>
</html>

我試圖通過調整瀏覽器 Chrome 窗口的高度和寬度來重現該問題,但我做不到。

更新 2:我在 Chrome 中附加了來自 Gmail 的相關 HTML 代碼(正在運行):

<div style="background:#f8f8f8;margin:0px;padding:0px" bgcolor="#f8f8f8">

    <div style="background:#1b1b1b linear-gradient(to bottom,#222,#111);border:#252525;min-height:50px;width:100%">
        <img alt="Yanpy" height="30" src="?ui=2&amp;ik=836c81b94f&amp;view=fimg&amp;th=149e8a5ae9582fb1&amp;attid=0.1&amp;disp=emb&amp;attbid=ANGjdJ8q_xSPAswkC2fDqsoAHPR0qKIUHUDjW45HorJli1u9zmcocdWFYXYi2rysx9cYcvsx7KJScrWLqDHBAOP-5W5g7LynDaj0cnMtQyS_P7D3A8ihhvpRKBLttmw&amp;sz=w174-h60&amp;ats=1416947426145&amp;rm=149e8a5ae9582fb1&amp;zw&amp;atsh=1" width="87" style="margin-left:20px;margin-top:10px" class="CToWUd">
</div>

現在,從 Mac Mail 無法正常工作(注意:我不確定這是否是真正的代碼,我不知道如何從 Mail 獲取它。我只是將電子郵件轉發到一個 Hotmail 帳戶並從那里獲取):

<div style="background-color:rgb(248, 248, 248);padding:0px;font-family:Helvetica;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;"><div style="background-color:rgb(27, 27, 27);border:rgb(37, 37, 37);height:50px;width:727px;background-position:initial initial;">

<img id="ecx52214002-0011-49E6-B577-6C08A8DA9C9E" height="121" width="352" src="https://dub126.afx.ms/att/GetInline.aspx?messageid=5293f1b7-74df-11e4-9417-00237de45652&amp;attindex=0&amp;cp=-1&amp;attdepth=0&amp;imgsrc=cid%3a32FDE1B1-DA1A-4A66-B63C-BBB067B5AB81%40Home&amp;cid=ed5bb1624ed90a36&amp;shared=1&amp;hm__login=roberto.chingon&amp;hm__domain=hotmail.com&amp;ip=10.148.132.8&amp;d=d3103&amp;mf=0&amp;hm__ts=Wed%2c%2026%20Nov%202014%2008%3a11%3a10%20GMT&amp;st=roberto.chingon&amp;hm__ha=01_745f8f086a98f87d549a0721ddd5738b4bfecce8795f549762672eea9f5cf5ba&amp;oneredir=1"></div><div style="padding:20px;"><h4>Hola Admin,</h4><p>El usuario prueba se ha registrado con el email<span class="ecxApple-converted-space">&nbsp;</span><a href="mailto:propietario.yanpy3@gmail.com">propietario.yanpy3@gmail.com</a><span class="ecxApple-converted-space">&nbsp;</span>correctamente.</p><p>Un saludo,</p><p>El equipo de Yanpy.</p></div></div>

Apple Mail 使用類似於 Outlook for Mac 的 WebKit 渲染引擎,您應該嘗試使用 Chrome 和 Safari 等 WebKit 瀏覽器對其進行測試。

我修好了它。 處理電子郵件時,您必須像老式 HTML 一樣進行開發,我的意思是,您無法鏈接到外部 CSS 文件。 相反,您應該直接在 HTML 模板中添加您的 css 屬性。 如果它在標簽的 style 屬性中嵌入了 css,那就更好了。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM