Web browsers on mobile devices tend to treat text-only web sites the same way as they treat sites with visual layout. As a result, small changes are required so that a text-only web site renders properly on mobile browsers.
Originally, HTML was device-independent. Screen resolutions and browser window sizes varied. Lines in paragraphs of text were wrapped based on available space. Back when screens were most in 4:3 format and of generally small size, such as 1024 times 768 pixel or less, this usually resulted in a line length of around 70 characters, which is neither too short nor too long to impede readability.
However, eventually most users switch to full-screen browser windows on very wide screens (16:10, 16:9, or even wider). Automatically wrapping lines would result in lines with hundred characters or more, and such long lines are difficult to read. Therefore, it is necessary to limit line length.
Around 2003, when I wrote the HTML generator for this web site, I empirically picked a width value of 40 ems for the main text, with a CSS directive like this:
div.body { width : 40em; display : block; }
A width of 40 ems corresponds to slightly less than 70 characters per line for English text, although rendering by browsers varies (Chromium on Debian prefers longer lines, for example). The advantage of em-lengths is that they scale automatically with the chosen font and font size. The web site does not specify font sizes at all, and this approach still gives reasonable results—on classic desktop web browsers.
It turns out that this does not work at all with web browsers on mobile devices with touch screens. It appears that mobile web browsers emulate something fairly close to a 1024-pixel wide screen, and attempt to render, when first visiting a web page, something like a thumbnail view of the entire page. The expectation seems to be that users pick from this overview the part of the page they are interested in, and zoom in. This behavior applies universally to all web pages, including text-heavy pages which do not use visual layout. But it is possible to opt out of the screen emulation, with a specific meta directive in the HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1">
If this viewport declaration is present, most mobile devices treat the HTML document in a more device-independent manner, skip the screen emulation, and aggressively wrap text as needed. For these web pages, one additional change was needed. Some devices may have a small screen which is less than 40 ems wide. Changing the CSS reflects that:
div.body { max-width : 40em; display : block; }
I do not have notes from 2003; based on the specification alone, this should have worked even back then. But browsers implementations were likely rather poor at the time, so that width worked and max-width did not.
I do remember that I could not use CSS to center the main page element within the browser window. Today it is easy, with the margin declaration:
div.body {
max-width : 40em;
margin : 0 auto;
display : block;
}
This is the style declaration which I currently use.
2015-03-31: published