neil on the web!

I had some time while on leave so I decided to update my web site so that it displays better on mobile devices.

I added a viewport meta tag to the headers:

<meta name="viewport" content="width=device-width initial-scale=1" />

I amended the css file:

/* wraps pre and code */
pre,code
{
    white-space: pre-wrap;
}

/* Media screen added 2014 Feb 03 NT */

@media only screen and (max-width: 480px)
{
    body
    {
        margin:5%;
    }
    #content,
    #navigation
    {
        float: none;
        width: auto;
    }
}

This works so far on Safari, Chrome, Opera, my Android phone, iPad, an iPhone. The effect is to present the page as a single column on mobile devices and a restricted width desktop browser. I amended weblog css in a similar way so that this is also easier to read on mobile devices.