Fatal编程技术网
  • html/
  • Html Gmail中的响应电子邮件宽度

Html Gmail中的响应电子邮件宽度

html css gmail

Html Gmail中的响应电子邮件宽度,html,css,gmail,html-email,responsive,Html,Css,Gmail,Html Email,Responsive,我有这个电子邮件模板： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" conten

我有这个电子邮件模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>title</title>
    <style type="text/css">
    img { max-width: 600px;  -ms-interpolation-mode: bicubic;}
    .ReadMsgBody { width: 100%; }
    .ExternalClass {width:100%;}
    .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
    body {
      width: 100%;
      height: 100%;
      direction: rtl;
    }
    .force-full-width {
      width: 100% !important;
    }
    </style>
    <style type="text/css" media="only screen and (max-width: 599px)">
      @media only screen and (max-width: 599px) {
        table[class*="w320"] {
          width: 320px !important;
        }
      }
    </style>
  </head>
  <body dir="rtl" class="body" style="width:100vw; padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
  <table align="center" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" valign="top" style="background-color:#ffffff" width="100%">
      <center>
        <table cellspacing="0" cellpadding="0" width="600" class="w320">
          <tr>
            <td align="center" valign="top">
              <table class="force-full-width"  width="100%" cellspacing="0" cellpadding="20" bgcolor="#ef6900">
                <tr>
                  <td style="background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">
                    Some text
                  </td>
                </tr>
              </table>
              <!-- more tables -->
            </td>
          </tr>
        </table>
      </center>
      </td>
    </tr>
  </table>
  </body>
</html>


标题
img{最大宽度：600px；-ms插值模式：双三次；}
.ReadMsgBody{宽度：100%；}
.ExternalClass{宽度：100%；}
.backgroundTable{边距：0自动；填充：0；宽度：100%；！重要；}
身体{
宽度：100%；
身高：100%；
方向：rtl；
}
.强制全宽{
宽度：100%！重要；
}
@仅介质屏幕和（最大宽度：599px）{
表[类别*=“w320”]{
宽度：320px！重要；
}
}
一些文本
它在安卓系统的Gmail应用程序上确实有效，但在桌面版本中，电子邮件内容会溢出
。
如果我移除
宽度：100vw从
body
标签，桌面工作正常，但在移动版本中内容溢出。我的问题是如何在手机上实现100%的机身宽度，在桌面上实现600像素的机身宽度？我试过
最大宽度：600px采用主体样式，但不起作用。我还尝试了100%而不是100vw（因为100vw是屏幕的宽度），但它也不起作用。
如果您删除
宽度：100vw，您的电子邮件将正常工作来自body标签。
我做了一些更改，希望这是您想要的结果。我已经做了以下工作：


    

  • 从车身上拆下
    宽度：100vw
    • 

  • 添加了在body标记上使用的类body，并定义了body CSS
    • 

  • 已更改媒体查询（已删除空间）
    • 





标题
img{最大宽度：600px；-ms插值模式：双三次；}
.ReadMsgBody{宽度：100%；}
.ExternalClass{宽度：100%；}
.backgroundTable{边距：0自动；填充：0；宽度：100%；！重要；}
身体，身体{
宽度：100%；
身高：100%；
方向：rtl；
}
.强制全宽{
宽度：100%！重要；
}
@仅介质屏幕和（最大宽度：599px）{
表2.w320{
宽度：320px！重要；
}
}
一些文本

没有。我不知道你在做什么，但我测试了你在Litmus中发布的代码，针对每个主要的电子邮件客户端，然后通过将我的版本从Putsmail发送到Gmail进行测试。你的版本将事情向右移动。我的版本运行得很好，但并没有完全集中在移动安卓系统中。没错，我的版本将所有东西都向右移动，我如何修复它？我通过删除
width:100vw来自body标记。这使得Android版本的左边距更宽，但表格仍在邮件正文中。