css - 表情符号在 IOS 7 上的字体大小不会超过 16 像素

Question

我们正在使用 UIWebView 中的网页在 phonegap 中制作应用程序，在这个产品中，我们允许苹果的表情符号，我们将 AppleColorEmoji 字体应用到其中，从而可以缩放它们。

在 iPad 和 iPhone 上更新到 IOS 7 后，带有字体 AppleColorEmoji 的表情符号以前允许缩放到所需的任何大小，现在不再缩放超过 16px 字体大小（它可以缩放更小）。它仍然可以在 IOS <7 的设备上按预期扩展

我担心这是他们有意在 IOS 7 中引入的东西。有没有其他人遇到过这个问题，甚至可能有解决方案？

score 6 · Accepted Answer

在 Webkit 中，在 HTML 元素中缩放这样的表情符号：

<span style="-webkit-transform: scale(5); position: absolute;">&#x1f47f;</span>

上面的缺点包括定位需要调整大小，因为transform必须将应用于具有 position 的元素absolute。如果表情符号转换太大，也可能发生像素化。

score 2 · Accepted Answer

如果这对任何人来说仍然很有趣（我忘了这仍然是开放的），那么“解决方案”是将 iPhone 的元标记设置为：

<meta name="viewport" content="width=320"/>

这可确保 iPhone 将内容放大以适应屏幕的 640 像素（或更多），而 16 像素大小的表情符号现在将是原来的两倍。但是，这只会将它们放大到合理的大小。对于想要完全控制字体大小的人来说，它仍然无法解决。

score 2 · Accepted Answer

如今，您可以使用来自Google Noto、EmojiOne、Twemoji或Emojidex的图像文件。

即使您没有缩放问题，这也可以确保表情符号字符在每个浏览器中正确显示。

score 1 · Accepted Answer

1

iOS WebKit https://trac.webkit.org/changeset/188737修复了这个问题（但尚未发布）。

于 2015-10-13T04:41:38.140 回答

score 0 · Accepted Answer

0

看起来这个是在 iOS 10 中修复的。

于 2016-08-09T19:35:41.103 回答

score 0 · Accepted Answer

我在这里有一个很好的场景来了解它是否是操作系统：

我最初的假设是它与视口大小有关，但有趣的是，在用 30 针电缆将 4s/9.3.5 连接到 safari 浏览器工具后，表情符号的边界框，而不是屏幕上的字形。我无法用 CSS 实现这一点。

¯\_(ツ)_/¯ 我会在5s更新后更新这个。

编辑：一旦我将 5s 更新到 10.0，表情符号就会调整大小。看起来iOS版本是问题所在。

score -4 · Accepted Answer

如果要将表情符号字符缩放超过 16 像素，则必须使用 AppleColorEmoji 字体。这是唯一可以将表情符号缩放到 16 像素以上的可用字体。

7 回答 7