2023-11-26
The HTML viewport mess
Over on the Fediverse, someone I follow recently wrote a basic HTML page, tried it in a (simulated) phone environment, and got a page with ant-sized text. Some of the people reading this already know what the issue is, which is that the page didn't include a magic <meta> tag to tell phones to do the sensible thing, although the tag is not generally described that way. It's a little bit absurd that in 2023 we still have this problem, but here we are.
As I understand it, the story goes like this. Back in the beginning of smartphones, they had very small screens in both physical size and pixels (and they still mostly have that). People found out that if the smartphone browser used the true device size for website HTML layout, what you almost always got was either a messy disaster (if the site used relative widths and heights, which would slice an already small size into extremely small pieces) or constant scrollbars (if the site used absolute widths and heights, which would generally be much wider than the device's screen size). So smartphone browsers evolved a hack, where they would do HTML layout as if they had a much larger 'reasonable' resolution, then shrink the entire rendered result down to fit on the screen and let people do pinch to zoom to zoom in on portions of the tiny website so they could, for example, read text.
However, sometimes web sites were ready to render well on the small smartphone screens. To communicate this to smartphone browsers, the website had to include a special "viewport" <meta> tag in its HTML <head>. While the tag lets you specify a number of things, what you almost always want (especially for basic HTML) is 'width=device-width', which tells the smartphone to do layout at its native size (and thus is a promise from the website that it is prepared for this and will do sensible layout things). As a side effect of the smartphone browser doing layout at its native size and not shrinking the rendered result down, basic HTML text gets sensible (ie readable) font sizes.
Here in 2023, smartphone browsers are a sufficiently large traffic source that very few people can ignore them. The magical '<meta name="viewport" content="width=device-width">' tag is functionally almost universal (sometimes with assorted additions); you'd probably have to look hard to find a web page without it. However, for an assortment of reasons no one is willing to actually make that setting the default (not in smartphone browsers and not in, for example, HTML5). So if you write a basic HTML5 page by hand and forget this tag, a smartphone browser will jump back to 2005 or so and render your web page with text suitable for ants, when as a basic HTML page it would have worked just as well at the smartphone's true size.
(In theory a HTML rendering engine could detect that you were using truly basic HTML with no widths specified and no use of things like tables, and then switch you to 'viewport=device-width' automatically because it would definitely work fine. In practice I doubt anyone wants to add that complexity for what is a very rare usage case.)