neil on the web!

out and about

2014 Feb 05

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 */
    white-space: pre-wrap;

/* Media screen added 2014 Feb 03 NT */

@media only screen and (max-width: 480px)
        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.