Question

我正在使用操作邮件程序发送此电子邮件模板

<!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>

效果是在移动屏幕上，其宽度神秘地设置为960px，如下所示。根据媒体查询规则，我将其设置为100％，应为父div容器的100％，该容器应很好地适合移动视图中的图像，但在移动视图中它将宽度设置为960px，因此仅显示部分图像。如何在移动屏幕上将宽度设置为100％，而不是960px？谢谢！

更新：

要测试，请使用以下代码。您可以将以下模板用于行动邮件电子邮件。我正在使用rails和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>

Answer 1

电子邮件模板中支持媒体查询。您需要在head标签内将视口设置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询在HTML电子邮件中不起作用？

1 个答案: