We're making an app in phonegap using web-pages in the UIWebView, and in this product we allow apple's emojis, which we apply the AppleColorEmoji font to, making it possible to scale them.
After updating to IOS 7 on both iPad and iPhone, the emoji with font AppleColorEmoji that previously allowed for scaling to whichever size wanted, no longer scales beyond 16px font-size (it can scale smaller). It still scales as intended on the devices with IOS <7
I fear this is something they introduced in IOS 7 intentionally. Have anyone else experienced this problem, and perhaps even a solution to it?
If in desperation, in Webkit, one can scale such emoji character in a HTML element to whatever size one wants.
<span style="-webkit-transform: scale(5); position: absolute;">👿</span>
Minor inconveniences with the voodoo presented above is that the positioning will need adjusting for the size, since the transform has to be applied to elements with position absolute. Pixelation could also be slightly annoying, if the emoji is transformed too large.
If this is still interesting for anyone (I forgot that this was still open) then the "solution" was to set the meta tag for iPhones to:
<meta name="viewport" content="width=320"/>
This ensures that the iPhone scales the content up to fit the 640 pixels (or more) the screen has, and the emojis with 16px size will now be twice as big. However, this will only scale them up to a reasonable size. It still doesn't fix it for the people wanting to control the font-size completely.
Nowadays, you can use image files from Google Noto, EmojiOne, Twemoji, or Emojidex.
Even if you don't have scaling issues, this ensures that emoji characters display correctly in every browser.
iOS WebKit https://trac.webkit.org/changeset/188737 fixes this (but it hasn't shipped yet).
Looks like this one is fixed in iOS 10.
I have a great scenario here to learn if it's the OS:
- I have an iPhone 4s, iOS 9.3.5: small emoji
- I have an iPhone 5s, iOS 9.3.5: small emoji
- I have an iPhone 6s, iOS 10 GM: big emoji scale from css font-size property
- I am updating the iPhone 5s from 9.3.5 to iOS 10.0 as I type this, so we'll see if this fixes it.
My initial hypothesis was that it was related to viewport size, but after hooking the 4s/9.3.5 up to the safari browser tools with the 30-pin cable interestingly, the bounding boxes of the emoji scale, just not the glyph on screen. There's no way I was able to effect that with CSS.
¯\_(ツ)_/¯ I'll update this once the 5s updates.
Edit: Once I updated the 5s to 10.0 the emojis were resizing. It looks like iOS version was the issue.
If you want to scale Emoji characters more than 16px, then you'll have to use AppleColorEmoji Fonts. This is the only available font that can scale Emoji beyond 16px.
来源：https://stackoverflow.com/questions/19702013/emojis-wont-scale-beyond-16px-font-size-on-ios-7