16

我在尝试阻止 iPhone 调整 HTML 电子邮件的大小以适应屏幕时遇到问题。下面的代码在放入该部分时似乎无效。

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

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

@media screen and (max-device-width: 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>
4

5 回答 5

13

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

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

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

于 2012-08-16T00:45:37.407 回答
3

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

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

解决方案：为最小宽度（300 像素，因此它不会占用整个 320 像素 iphone 宽度）、最大宽度（您想要的最大宽度）和100% 宽度 为图像添加内联样式。

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

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

于 2014-06-05T08:53:28.887 回答
2

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

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

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

于 2012-08-19T02:30:29.977 回答
1

为了摆脱这个问题，你必须在你的 CSS body 标签中加入以下内容：

    -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，
托利斯

于 2012-08-21T13:53:07.443 回答
-1

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

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

邮件应用程序也可能是唯一支持 CSS3 的客户端

于 2012-08-15T12:46:34.097 回答