Question

Are there any known problems with font-size scaling differently on Android and IPhone?

I’ve got a site with 107% font-size set on the HTML selector. Then I’ve got a media query right below it that sets the font-size to 150% for screens smaller than 500px.

If I remove the media query and view the page on an Iphone and an android, the 107% size text looks comparable in size on both devices.

If I add the media query back in, the text gets bigger on both devices as expected. However, on the iPhone it gets WAY bigger so much so that its almost 50% to 100% larger than it appears on the android! It totally breaks the layout!! This is happening on all text elements everywhere in the layout.

Is this a known problem with mobile devices or do I have some kind of compounded units problem happening?

Answer 1

Well, is it in both portrait and landscape mode, or only in landscape?
Because, in landscape, fonts get bigger by default browser behaviour. Maybe one was in portrait mode and other in landscape?

See about this here >
Preserve HTML font-size when iPhone orientation changes from portrait to landscape

And if this is your problem, the solution is something like>

html {
  -webkit-text-size-adjust: 100%;
}