Web Design

Prevent unintentional font size increase in Safari on iOS “-webkit-text-size-adjust: 100%;”.

iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ「-webkit-text-size-adjust: 100%;」

Hi there.
I am Satou, a Web/App/UI designer.

This time, I would like to talk about “-webkit-text-size-adjust: 100%;” which prevents unintentional font size enlargement in Safari on iOS.

Some fonts on the page get bigger only in Safari on iOS

The other day, I was coding a website for work.
I was coding a website that was not optimized for smartphones to make it responsive.

Sometimes, while checking the coding on the actual device (iPhone), I found one area where the font size was strangely large.
This phenomenon was observed not in one place exactly, but in a certain cell of multiple tables that were set up according to the same rule.
The font size, which should have been set at 16px, is now 1.5 times larger.

The font size is unintentionally increased only in Safari for iOS.

That phenomenon does not occur when I checked with Chrome’s Developer Tools or Safari for Mac in responsive design mode.
I also checked in Firefox just to be sure, but the font size is still normal.
The phenomenon did not occur in Safari on the iPad either.

I did not apply any particular style that changes the font size to the area in question.

The area where the font size changes is the text in one cell of the table.
There is no special style applied to that cell, no nesting with other elements, and the text is placed just like any other cell.

Checking in Chrome’s Developer Tools, I can’t see any styles being applied that would change the font size.
Checking with other browsers gives the same result, of course.

Safari for iOS automatically adjusts font size to fit the device.

I searched for similar cases and found quite a few articles.
According to these articles, it seems that Safari for iOS has a feature that automatically adjusts font size to fit the device.
I vaguely remember hearing something like that somewhere in the past….

Just a quick look found an article from 2011.
It seems that there are quite a few developers who have been affected by this unusual phenomenon.
However, in all my years of coding, this is the first time I have experienced such a case (or maybe I just forgot about it?), so I was a bit surprised. I was a bit surprised.

Moreover, the fact that he made adjustments not to the entire page but to parts of it is troublesome.
Well, the whole page is tricky too…

“-webkit-text-size-adjust: 100%;” solves this problem.

The CSS property that controls this automatic font size adjustment is text-size-adjust, and by setting this value to 100%, the automatic adjustment is stopped and the font size is fixed at 100%. This is for Safari.
For Safari, a -webkit- vendor prefix is also added to the property.
By adding this to the body, it is applied to the entire website.

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

After applying this CSS and checking on the iPhone, the phenomenon of unintentionally enlarging the font size was resolved.
There is no abnormality when checked with other browsers.

-webkit-text-size-adjust: 100%;

The text-size-adjust property is for aligning the size of multiple fonts.

The text-size-adjust property is used to adjust the size of multiple fonts.

Fonts differ in shape and size, and even if you specify, for example, font-size: 16px;, the size may differ slightly from font to font.
This is especially true for Japanese fonts and European fonts.

In such cases, the system adjusts the font size so that the fonts will not be displayed in different sizes even if they are displayed mixed together.

In my case, I found that a different font-family was specified for the area in question than for other areas.
However, even if I removed the font-family, the symptom did not improve.
The root of this problem seems to be a bit deeper.

Trouble tends to occur when modifying existing coding

In my case this time, the problem occurred when I was asked to simply make a smartphone-incompatible website that someone else had created several years earlier.

Before we started the work, even a quick glance at the source showed that the coding was quite low-maintenance.
And since we were on a small budget, we couldn’t afford to put that much work into it.
To be honest, we knew that something troublesome would happen.

In projects like this, where you have to modify an existing website, the older the website is, the more likely it is that some kind of trouble will occur.
Well, it is what we call “common.

If the project is coded according to solid rules and has a specification document, the risk of trouble will be low, but such projects are rare.

Still, it is fortunate that this project did not cause any major problems other than the unusual font size phenomenon.

So, this time, we talked about “-webkit-text-size-adjust: 100%;”, which prevents unintentional font size enlargement in Safari on iOS.
How was it?
I hope it was helpful to you.
See you next time.