我正在使用action mailer发送此电子邮件模板
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<style>
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
img{
width: 100%;
}
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */
img{
width: 100%;
}
}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
img{
width: 100%;
}
}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
img{
width: 50%;
}
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
img{
width: 50%;
}
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
img{
width: 50%;
}
}
</style>
</head>
<body>
<%= image_tag(attachments['banner.png'].url) %>
<p> Thanks for purchasing with us! </p>
<hr>
</body>
</html>
更新:
请使用以下代码进行测试。您可以使用以下模板发送action mailer电子邮件。我正在使用rails和action mailer。使用action mailer我发送以下html电子邮件。收到电子邮件后,请在移动设备中查看它,您将看到图像远远超出屏幕宽度。在chrome中,你可以在移动模式下查看它,右键点击图片查看它,你会看到最大宽度设置为960px。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<style>
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
img{
width: 100% !important;
}
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */
img{
width: 100% !important;
}
}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
img{
width: 100% !important;
}
}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
img{
width: 50% !important;
}
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
img{
width: 50% !important;
}
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
img{
width: 50% !important;
}
}
</style>
</head>
<body>
<%= image_tag('http://via.placeholder.com/5548x985') %>
<p> Thanks for purchasing with us! </p>
<hr>
</body>
</html>
