停止 iPhone 调整 HTML 电子邮件大小的问题答案

【问题标题】：Issue stopping iPhone resizing HTML e-mails停止 iPhone 调整 HTML 电子邮件大小的问题
【发布时间】：2012-08-01 20:30:01
【问题描述】：

我在尝试阻止 iPhone 调整 HTML 电子邮件的大小以适应屏幕时遇到问题。好像下面的代码放到section里面没有效果。

我的目标只是停止调整字体大小。我使用 -webkit-text-size-adjust:none; 尝试了其他变体。 inline 和其他方式，都没有成功。

非常感谢任何建议或替代解决方案。

@media 屏幕和（最大设备宽度：480px）{

/*fixes too big font in mobile Safari*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none; }  }       </style>

【问题讨论】：

你在谈论布局调整大小，你试图避免字体大小调整。您确定问题不在于表格或 HTML 中的其他内容吗？
抱歉，我应该更清楚一点——我要做的就是停止重新调整字体大小。无论我如何或在哪里使用 -webkit-text-size-adjust:none;它似乎不起作用。我已经在 Litmus 中对其进行了广泛的测试。
样式表（内联或其他）通常在电子邮件中被忽略（或完全剥离）。尝试将其设置在 style 属性上，也许？
在body标签上尝试过，但没有成功。想知道它是否无法控制。
我不知道这是可能的，如果您找到解决方案，我会发表评论以跟踪它。谢谢。

标签： iphone html css html-email

【解决方案1】：

在调整大小时，iPhone 似乎很痛苦，尤其是当您切换手机的方向时。您是否尝试过添加带有视口设置的元标记？

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>

它确实阻止了它们缩放，但我还没有找到更好的方法来阻止 iPhone 在方向变化时缩放。我不确定这是否会在这种情况下有所帮助，但只是一个尝试的建议。

【讨论】：

好建议。曾尝试过类似的事情，这似乎并没有造成任何影响。整个电子邮件会自动调整大小以适应屏幕，使字体过小。
请注意，包含此元标记将导致 Blackberrys 显示空白屏幕而不是任何电子邮件。

【解决方案2】：

我被这个问题困住了，网上没有可用的解决方案。直到我意识到是什么原因造成的。

原因： 如果您在电子邮件中有图像，则会出现此问题。当图像自动缩放时，整个电子邮件/页面将自动适应窗口。

解决方案： 为 min-width（300px 所以它不会占用整个 320px iphone 宽度）、max-width（您想要的最大宽度）和100% 的宽度。

即 image src="image.jpg" style="width: 100%; min-width: 300px; max-width: 500px;"

为我工作，...希望这也可以帮助你！ ;-)

【讨论】：

【解决方案3】：

您所做的是正确的，但问题是您应该按以下方式使用它，而不是在样式标签中使用-webkit-text-size-adjust:none;：

<body style="-webkit-text-size-adjust:none;">

这意味着您应该将其用作内联 css 属性。

【讨论】：

所以我尝试内联添加它，并且我还删除了媒体查询。 Litmus 测试仍然显示整封电子邮件的大小已重新调整以适应大小，并且文本缩小了，因此它仍在调整字体大小。

【解决方案4】：

要摆脱这个问题，你必须在你的 CSS 正文标签中添加以下内容：

    -webkit-text-size-adjust: 100%;

这样 Safari 会将文本保持为预期大小的 100%。如果您将该值设置为 none，用户将无法增加字体，这是不受欢迎的行为。

此 CSS 属性受支持并且应该可以工作。

查看官方 Safari 支持的 CSS 参考：

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

另外请注意，媒体类型屏幕支持：

Safari 4.0 及更高版本。
iOS 1.0 及更高版本。

我希望这会有所帮助。

BR，
托利斯

【讨论】：

【解决方案5】：

视网膜 iPhone 的宽度为 640 像素，您的媒体查询在 480 像素处停止。

无论如何，您可以完全摆脱媒体查询。唯一将使用此属性 (-webkit-text-size-adjust:none) 的基于 webkit 的邮件客户端是 iPhone 和 iPad 的邮件应用程序。

Mail 应用也可能是唯一支持 CSS3 的客户端

【讨论】：

Retina 显示器的屏幕尺寸相同，只是 DPI 有所变化。它响应与旧 iPhone 相同的媒体查询。