Ok, maybe not pretty. Readable, though. I’ll settle for readable.
First, I wanted to get the font size right. To do that I used media queries in my CSS to determine if I’m displaying on a phone-sized device:
@media only screen and (max-device-width: 480px) {
body{
font-size:160%;
}
}
That worked, but when I rotated the phone into landscape, the text got bigger. I don’t want bigger text. I want longer lines with the same size text. The universal advice was to add the following:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
But, it appeared, this had no effect on safari on either iOS5 or iOS6. So I kept googling. Finally I came across this post about having constant text size without disabling user zoom.
Here I learned about iOS assume that my website doesn’t know anything about mobile devices, and how to instruct it otherwise:
<meta name="viewport" content="width=device-width, initial-scale=1" />
With this in my header, the font scaling trick, above, worked, but all my fonts were huge. I tried leaving font-size at 100%, but in the end I set them to 80%. I have pretty poor eyes, so I figure if I can read it at 80%, anyone can.
Next was line spacing. I like big paragraphs to have reasonable amount of space between each line. Too much time spent reading my wife’s double-spaced english papers perhaps. So I set the line-height for <p> to 1.5 (note: that’s just a number, not 1.5em or 1.5% or 1.5px).
I spent about two hours sorting this out. A lot of time was spent twiddling and experimenting. I also started serving
files using a webserver, rather than just using file:
so I could view them on my iPhone. I used:
python -m SimpleHTTPServer