HTML电子邮件在Gmail Crome浏览器中变得无反应，在Gmail应用程序中工作正常，并且在Google桌面中的控制台可以很好地工作
我正在创建此电子邮件HTML模板HTML在Google Console和Gmail移动应用程序中响应地工作，但在移动Chrome Gmail版本中会扭曲。
当我在Crome桌面中打开控制台时，此图像是移动响应能力
当我在浏览器桌面上打开时，这是电子邮件响应
当我在移动浏览器中打开时，这是图像响应
请注意此电子邮件模板在Gmail移动应用程序中正常工作
<!DOCTYPE html>
<html lang="en">
<head>
<title>pixels</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Objektiv+Mk1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.c500&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: objektiv mk1;
src: url(fonts.ttf);
}
* {
font-family: objektiv mk1;
}
</style>
</head>
<body style="margin:0; padding:0;">
<div style="width:600px; margin:auto; overflow:hidden; border: 1px solid #E5E5E5; background-image: url(https://i.postimg.cc/Y00Zyjrj/xxx.png); background-repeat: no-repeat; background-position: 0px 91px; ">
<table width="600px" cellspacing="0" cellpadding="0" style="position: relative; border: none; ">
<tbody>
<td style="padding: 20px;">
<table width="100%">
<tr style="text-align: center; width: 100%;">
<td style="text-align: center;">
<div>
<img src="https://i.postimg.cc/fyVqfFC9/xxx-xxx-logo-green-410x.png"
style="max-width: 150px;">
</div>
</td>
</tr>
<tr>
<td style="text-align: center; padding: 25px 0px 0px 0px; border-top: 2px solid #f4f4f4;">
<div>
<img src="https://i.postimg.cc/X7p6s1qx/xxx-you.png" style="max-width: 350px;">
</div>
</td>
</tr>
</table>
</div>
<tr>
<td style="background: #fff; font-size: 28px; text-align: center; padding: 20px 84px 30px;">for
ordering with us and taking the first step towards better health and wellness
I am creating this email html template the html works responsively in google console and gmail mobile app, but gets distorted in mobile chrome gmail version.
This image is the mobile responsiveness when i open in console in crome desktop
this is email responsivness when i open in browser desktop
this is image responsiveness when i open in mobile browser
note this email template works fine in the gmail mobile app
<!DOCTYPE html>
<html lang="en">
<head>
<title>pixels</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Objektiv+Mk1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.c500&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: objektiv mk1;
src: url(fonts.ttf);
}
* {
font-family: objektiv mk1;
}
</style>
</head>
<body style="margin:0; padding:0;">
<div style="width:600px; margin:auto; overflow:hidden; border: 1px solid #E5E5E5; background-image: url(https://i.postimg.cc/Y00Zyjrj/xxx.png); background-repeat: no-repeat; background-position: 0px 91px; ">
<table width="600px" cellspacing="0" cellpadding="0" style="position: relative; border: none; ">
<tbody>
<td style="padding: 20px;">
<table width="100%">
<tr style="text-align: center; width: 100%;">
<td style="text-align: center;">
<div>
<img src="https://i.postimg.cc/fyVqfFC9/xxx-xxx-logo-green-410x.png"
style="max-width: 150px;">
</div>
</td>
</tr>
<tr>
<td style="text-align: center; padding: 25px 0px 0px 0px; border-top: 2px solid #f4f4f4;">
<div>
<img src="https://i.postimg.cc/X7p6s1qx/xxx-you.png" style="max-width: 350px;">
</div>
</td>
</tr>
</table>
</div>
<tr>
<td style="background: #fff; font-size: 28px; text-align: center; padding: 20px 84px 30px;">for
ordering with us and taking the first step towards better health and wellness ????</td>
</tr>
<tr style="background-color: #E5E5E5;">
<td>
<table style="width: 100%; padding: 40px; overflow: hidden;">
<tbody>
<tr>
<td style=" background: #fff; overflow: hidden; border-radius: 5px;">
<div><img src="https://i.postimg.cc/3wHMJKBb/process.png" style="margin: auto;"></div>
</td>
</tr>
<tr>
<td style="padding: 10px 0px;">
<p style="text-align:center;font-size: 18px; font-weight: 600;">Your order will
be dispatched within 48 hours. </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 26px 26px 0px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"
style="background-color: #EEFDEB;">
<thead style="background-color: #EEFDEB; margin-bottom: 10px;">
<tr>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Product
</td>
<td style="width:24%; padding: 10px"> </td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Qty</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Price</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Subtotal
</td>
</tr>
</thead>
<tbody style="background-color: #E5E5E5;">
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr>
<td style="width:20%;">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png"
style="max-width:100%;">
</div>
</td>
<td style="width:24%; font-size: 16px;">ACV <span
style="display: block;">Effervescent</span< /td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="padding: 26px; background-image: url(https://i.postimg.cc/RZfQd50z/1-Transactional-xxx-Order-xxx-svg-1.png); background-repeat: no-repeat; background-position: 100% 350px; width: 100%;">
<table width="100%;">
<tr>
<td style="">
<div
style="padding:0px 26px; background: radial-gradient(80.68% 88.46% at 50% 50%, #69DE7A 0%, #A9EF82 100%) #EEFDEB; border: 1.5px solid #000000; border-radius: 6px;">
<p style="text-align:center; font-size: 24px; font-weight: 700;">Your cashback
of {#var#} will be credited to your wallet upon delivery!</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td>
<div>
<p style="font-weight: 600;">Shipping to:</p>
<p style="margin:0;">{name}</p>
<p style="margin:0;">{address line 1}</p>
<p style="margin:0;">{address line 2}</p>
<p style="margin:0;">{address line 3}</p>
<p style="margin:0;">Tel. {phone number}</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td style="padding: 30px 75px 35px; font-size: 21px; text-align: center;">Check out our
<strong>other best-sellers</strong> based on your purchase!
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Apple Cider Vinegar Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><a href="#"><img src="https://i.postimg.cc/HsRDR07m/btn.png" /></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/BZzVnSZc/xxx.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Ashwa Calm</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><a href="#"><img src="https://i.postimg.cc/HsRDR07m/btn.png" /></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%; padding: 0px 20px;">
<div>
<img src="https://i.postimg.cc/pr3GGZc1/xxx.png"
style="max-width: 75px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Glutathione Skin Glow
Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><a href="#"><img src="https://i.postimg.cc/HsRDR07m/btn.png" /></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 25px;">
<table width="100%" style="border-radius: 5px; border: 1px solid #000; padding: 13px 25px;">
<tr>
<td style="font-size: 20px; font-weight: 600;">Stalk us on our socials ????</td>
<td style="text-align: right;">
<table width="100%;">
<tr>
<td style="text-align: center;"><a href="https://www.facebook.com/Plixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/HnPDpXZQ/xxx.png"></a></td>
<td
style="border-left: 2px solid #000; text-align: center; border-right: 2px solid #000;">
<a href="https://www.instagram.com/myplixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/wB5C1S4x/xxx.png"></a></td>
<td style="text-align: center;"><a
href="https://www.youtube.com/channel/UCxjpQEVVTxs1P8i9x4KVoKQ/videos"
style="line-height: 0; display: block;""><img src="
https://i.postimg.cc/262gwnfP/xxx.png"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您有许多大图，这些图像响应不力。您可以考虑将
最大宽度：100％放在它们上。另外，您可以通过在图像中添加类，然后使用媒体查询来微调某些类型的图像。例如：
如果没有外部Div
最小宽度：100％（并且没有宽度或最大宽度集），并且表<我也无法在浏览器中得到响应。代码>宽度：100％;最大宽度：600px; Margin：0自动。那将使它降至约420px，但后来只是大桌子不能变小。您可以考虑使用媒体查询来制作某些
＆lt; td＆gt;的在手机上的填充较少和/或使用小字体大小。否则，您将必须以不同的方式使您的桌子不同。You have a number of large images which are not responsive. You could consider putting
max-width:100%on them.Alternatively, you can fine-tune certain types of images by adding a class to the image and then using a media query. For example:
I also couldn't get it to be responsive in the browser without having the outer div
min-width:100%(and no width or max-width set), and, the tablewidth:100%;max-width:600px;margin:0 auto.That will get it down to about 420px, but then it's just large tables that can't be made smaller. You could consider using a media query for making certain
<td>'shave less padding on mobiles, and/or using a small font-size. Otherwise you will have to make your table differently.