我有一个简单的 Action 邮件程序
class UserMailer < ApplicationMailer
def welcome_email(m)
attachments.inline["banner.png"] = File.read("#{Rails.root}/app/assets/images/banner.png")
mail(to: m, subject: 'Welcome to My Awesome Site')
end
end
邮件程序发送的电子邮件模板如下所示
<%= image_tag(attachments['banner.png'].url, style: 'width: 50%;') %>
<p> Thanks for purchasing with us! </p>
<hr>
现在我要解决的问题是在计算机屏幕上显示的图像在 50% 宽度时看起来不错。但是在手机屏幕上太小了。我希望移动显示器的宽度为 100%，大屏幕或笔记本电脑和计算机屏幕的宽度为 50%。当我通过移动浏览器访问 gmail 网站查看电子邮件时，然后在移动屏幕上，50% 的宽度看起来太小了。那么我如何使用 Action 邮件程序邮件模板来实现这一点。感谢您的帮助!谢谢!
最佳答案
为了使您的电子邮件模板流畅，您需要以这种方式设计您的模板，然后根据您的设备要求添加媒体查询。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
@media only screen and (max-width: 480px){
.emailImage{
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
</head>
<body>
<%= image_tag(attachments['banner.png'].url,class:"emailImage", style: '') %>
<p> Thanks for purchasing with us! </p>
<hr>
</body>
希望这会有所帮助。
阿比德
关于html - 使用 actionmailer 时如何根据设备类型或屏幕大小调整图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51628353/