The issue...
While I was writing the theme (HTML and CSS) for this site, I stumbled upon the "ubiquitous" issue with the way sites are rendered by default on mobile phones.
As anyone knows by now, the solution is as simple as configuring the viewport @Mozilla:
<meta name="viewport"
content="
width=device-width,
initial-scale=1
" />
Unfortunately this solves only half of the problem, as now indeed the layout is "responsive", however the text sizing is somewhat "randomly" responsive...
The solution...
The solution seems to involve trying to "convince" the browser to really trust your judgment and use your font sizes, which requires configuring text-size-adjust @Mozilla:
text-size-adjust : 100%;
-webkit-text-size-adjust : 100%;
-ms-text-size-adjust : 100%;
The fine-print...
Although Mozilla suggests that the property text-size-adjust should do the trick, Apple and Microsoft seem to prefer their prefixed variants @Apple @Microsoft.
Moreover, again although Mozilla suggests that the value none should be exactly what we want, it seems that some old versions of Safari on iOS don't like that, and thus the "safest" solution is to use 100% (source).
The "new" issue...
And -- because things are way too "nice and tidy", and it would be a pity for the whole thing to "just work" -- Apple decided that when one changes the orientation of their phone from portrait to landscape (or vice-versa) it won't re-render the page with the new width, but instead it will just zoom into the previous rendering...
(I.e. if one thinks that by switching to landscape, one would get wider text lines, thus more words on the same line, then one is a fool for believing such nonsense...) 😄
Thus the same source suggests that one has to choose between user scalable pages with "wrong" text sizes, or non-user scalable pages with "right" text sizes...
The conclusion...
I would have preferred Gopher... 😄
But I can't, thus I need to apply the following magical incantation:
put inside the HTML:
<head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0, user-scalable=yes" /> </head>put inside the CSS:
html:root { text-size-adjust : 100%; -webkit-text-size-adjust : 100%; -ms-text-size-adjust : 100%; }
Further madness...
For the brave I would also suggest reading the following two: (part 1) and (part 2)... (I assume these two were written at the beginning of the "mobile era", however they portray veny nicely the mess we are in...)