Question

I use this in the html:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

and this in the CSS:

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

also tried this:

html { -webkit-text-size-adjust: none; }

and yet for some reason this happens:

Update: I tried removing all styling to see if any of my CSS is causing this, and the result was weird: when I’m not using any font rules, the font simply gets larger (it is not zoomed in since the zooming is locked by the HTML viewport attribute) also, only the small font gets larger, the headers remain the same. weird @#$%

Update 2: I played with the html/css and came to this conclusion – the only time when the text enlargement DOESN’T happen is when the text is contained inside the only element in the page – for example if all my body contains is p/span/div with text, it will not get enlarged. If I add another element with text in it, all text on page becomes enlarged in landscape mode.
I tried doing some research and looked through many mobile sites, and the result is the same – they all have this effect.

Answer 1

More Information than Real Solution

Based on my understanding of how things work according to this page and this page, all text will get refactored in landscape mode based on either -webkit-text-size-adjust: auto (the default for iOS) or by your setting of -webkit-text-size-adjust: 100%.

I do not believe the 100% setting is doing what you may think it is doing (an attempt to keep the text size the same). Rather, it is only affecting “how the text-inflating algorithm is applied” (per this page). I have not been able to track down exactly what that might mean; that is, what does 100% mean with respect to the inflation algorithm. My guess is, based upon this page’s quote…

The first time a webpage is rendered, Safari on iOS gets the width of
the block and determines an appropriate text scale so that the text is
legible.

…that since the procedure happens only “the first time a webpage is rendered” that once the device is turned from portrait to landscape the inflation algorithm will “grow” the text based off the width change of the screen being wider, even when set at 100%.

Perhaps this is because 100% is in relation to the width difference of portrait to landscape. For example, this iPhone spec is 960 x 640. It may be that 100% means the inflation uses some direct relation of 960 x 640 (say, 960/640 x 100%), working out to be 1.5, which is then causing the “boldness” of the landscape text. If such is the case, then theoretically the -webkit-text-size-adjust would perhaps need to be set to 66.67% to keep it unaffected (returning the 1.5 factor to a 1). But I’m not convinced that it is so straight forward.

Ultimately, I think Andrey Bukati’s answer of -webkit-text-size-adjust: none; is the only guarantee that no change in text sizing will occur. But it can have other, perhaps undesirable, affects.