Gmail 将 % 的最大宽度更改为 px？

Question

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

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

在我的图片上，我设置了

style="max-width:100% !important;"

在每张图片上内嵌。我的头上还有一个<style> 块

img {max-width: 100% !important;}

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

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

在 pc 浏览器中检查，inline max-width 现在显示

    max-width: 1920px;

在我的手机上查看（android，inline max-width is

    max-width: 767px;

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

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

以前有人遇到过这种情况吗？关于如何防止 gmail 弄乱最大宽度或让它尊重头部的最大宽度的任何想法？ （据我所知，我已经避免使用类或 id 从头部附加样式，谷歌将这些去掉）

甚至更奇怪（或者我可能正在失去它......）我确定这是昨天的工作......

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

再玩一会儿后，在所有宽幅图像上添加 width: 100% !important; inline 似乎可以解决问题 - gmail 不会影响值。如果有人有任何线索，知道它为什么会改变 max-width 的值仍然会很有趣！

Answer 1

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

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

gmail webapp 做了类似的事情。它限制了您可以将元素设置为的宽度，因此您不能添加比显示更宽的内容，而 gmail 网络应用程序以 100% 显示。

gmail 移动应用 - 将您的内容强制放入 320 像素/480 像素宽的盒子中

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

无论如何，Gmail 桌面在头脑中处理样式很奇怪，如果您使用除 #id 和 .class 之外的其他标签作为标识符，它会完全忽略大多数类/id（不要听那些说它完全剥离它们的人）将应用这些样式。例如

 * [lang~="identifier"]

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

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

总之。不要依赖 max-width 从内到外控制布局，将像素值设置为 limit width="100%"。

希望对你有帮助