Mobile View

Making the blog pretty on an iPhone

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