CODEWITHSUNDEEP
cssiosiphoneweb
jerclarke
jerclarke

Reputation: 1479

Why is font-size different on iOS Chrome v. iOS Safari?

I'm working on a responsive website and when checking it on my iPhone (iOS 13, June 2020) I found that the font size was different between Safari and Chrome.

I tried several things to account for it, but had trouble finding the cause.

I suspected it was related to some CSS I had from long ago: -webkit-text-size-adjust: 100%; Removing and changing this value had no effect on the difference though, so it was a red herring.

What would cause a discrepancy between the rendering of the same site and CSS on these two apps?

Upvotes: 5

Views: 6778

Answers (4)

Denise Ignatova
Denise Ignatova

Reputation: 533

I had a weird problem with paragraph on iOS14 ,13, it was enlarged, this has worked for me for Safari and Chrome:

-webkit-text-size-adjust: none;

I hope it will help someone too.

Upvotes: 0

Tito Moi
Tito Moi

Reputation: 21

In iOS 13, Safari exposes the media font-size to the final user, it means that in your root page (html tag) the css "font-size" rule is overrided, forced by the user and not possible to change.

And Chrome for Safari is not using rendering engine "Blink" as for Android, it's using Safari webKit render engine, so, Chrome for iOS is "Safari"

Anyway, you can react to this adjusting your media queries to work with "em" units instead of "px" in other words:

  1. Change bootstrap (if used) breakpoints to "em" instead of default pixels.
  2. Make your components border, paddings and other stuff pixel based.

Another way is understand what are the users needs and react before they need to adjust the font-size:

  1. Adjust font size based on viewport (css clamp)
  2. Use responsive layout
  3. Use css border-box, box-shadow...

Another way is recalculate everything, at much cost:

What if the user changes the root’s font size?

Upvotes: 2

Marcus D.
Marcus D.

Reputation: 61

Thank you for pointing me in the right direction - I've been having horrendous problems working out why Chrome on my iPhone SE was rendering text larger than Safari!

I don't seem to have a "default" setting for Text Size (Settings > Display & Brightness > Text Size).

However, -webkit-text-size-adjust: 100% did work for me - at least for Chrome which was where I was struggling.

Upvotes: 4

jerclarke
jerclarke

Reputation: 1479

Here are two potential causes, there are surely more, but these were the ones I found and solved my problem.

Chrome obeys the system-wide "Text Size"

Screenshot of the "Text Size" slider that controls font size in Chrome

If you use the "Text Size" slider in control center, or the related settings at the system level, Chrome automatically alters the text of sites!

From what I can tell, there's no setting in Chrome for iOS to disable this linkage with Text Size.

So if you want Safari and Chrome to match, make sure that the Font Size state of your phone is in the middle position that's marked as "Default".

Good to know both in case you use the Text Size controls day-to-day like I do, or your users or clients do!

Safari has a "Page Zoom" setting in Settings app

Screenshot of the Safari > Settings for Websites > Page Zoom setting in the Settings app.

On the other side, Safari has a setting called Page Zoom that goes from 50% to 300%. It's found in the Settings app under Safari > Settings for Websites > Page Zoom.

This setting can cause total chaos with CSS layouts at sizes like 200%.

Either way, if there's a discrepancy between the two apps, this Page Zoom setting is worth checking out as well.

Upvotes: 4

Related Questions