Question

我目前正在为各种客户处理html电子邮件，并且使用gmail（yay）遇到一些奇怪的问题 - 特别是在通过浏览器查看电子邮件时。（应用中没有问题）

在小屏幕（例如移动设备）上使用浏览器时才会出现这个问题 - 所有图像都显示得太宽，尽管有最大宽度，这意味着布局被拉伸并需要水平滚动。虽然它在桌面上没有引起任何问题，但代码却发生同样的事情

在我的图片上，我已经设置了

<style>

每个图像的内联。我的头部还有一个img {max-width: 100% !important;}块

    max-width: 1920px;

当检查图像元素（在我的手机和电脑上）时，我没有看到头部最大宽度的迹象，这并非完全出乎意料。

奇怪的是，每个图像的最大宽度设置为内联 - 但它不再是％，而是以px为单位。

在PC浏览器中检查，内联最大宽度现在显示为

    max-width: 767px;

在我的手机上查看（android，内联最大宽度为

width: 100% !important;

在这种情况下，图像现在太宽，打破了布局。所有图像都会发生同样的事情，无论它们的实际大小如何。

我没有看到任何消息告诉我该电子邮件已针对我的屏幕进行了调整，或者是打开或关闭此电子邮件的任何选项。

有没有人在此之前发生过这种情况？有关如何防止gmail弄乱最大宽度，或让它尊重头部最大宽度的任何想法？（据我所知，我已经避免使用类或id来附加头部样式，google将这些样式删除了）

甚至更奇怪（或者我可能会失去它......）我确定昨天工作正常......

更新：想想我已经解决了为什么它显然在昨天工作 - 它不是 - 我在重新加载时我在开发工具中所做的更改并没有清除，所以最大限度 - 宽度我作为测试添加（复制头部的最大宽度）仍然存在...

再玩一次后，在所有宽图像上添加select REGEXP_REPLACE(UTL_RAW.CAST_TO_VARCHAR2(DBMS_LOB.SUBSTR(p_targetCarts, 4000,1)),'[[:alpha:]]') from {OrderProposal}内联似乎可以作为修复工具 - gmail并没有弄乱这个值。如果有人有任何线索，知道为什么它会改变最大宽度的值仍然会很有趣！

Answer 1

Gmail因滥用设置布局的最大宽度而臭名昭着。

尽量避免将max-width设置为不是高级容器的元素的百分比值。你会遇到像gmail app这样的奇怪渲染。通常gmail应用程序将所有宽度转换为最大宽度，以便它可以处理您的内容但仍然保持更高屏幕分辨率的结构。

gmail webapp做了类似的事情。它限制了您可以设置元素的宽度，因此您无法添加比显示更宽的内容，gmail Web应用程序以100％显示。

gmail移动应用 - 强制将您的内容放入320px / 480px宽的广告框

gmail桌面应用 - 强制您的内容永远不会超过您的屏幕分辨率

Gmail桌面无论如何都会对头部的样式感到非常奇怪，如果你使用其他标签作为标识符，那么它完全忽略了大多数类/ id（不要听那些说它完全剥离它们的人） #id和.class它将应用这些样式。 e.g。

char

lang几乎是唯一可以使用的标签，它不会妨碍正在使用的标签，即Alt，Title和Href。

请注意，如果您使用媒体查询或以＆＃34; @＆＃34;开头的任何内容;在样式标签中，gmail可能会（取决于当天的感觉）完全删除该样式标签。您可以通过在正文中的样式标记中添加这些样式来避免这种情况。

总结。不要依靠最大宽度从内到外控制布局，将像素值设置为限制宽度=＆＃34; 100％＆＃34;。

希望这有帮助

Gmail将max-width以％更改为px？

1 个答案: