Hi! I'm Nathan Hoad


Now iPhone optimised

I just added support for Mobile Safari (or most other mobile browsers) to my blog. There are two ways you can do this: detect the User-Agent of the browser and do something server side, or, the somewhat more lazy way to do it is to just let the browser itself work it out. I chose the lazy way for now.

It's as easy as adding something like this to your <head>:

<link rel="stylesheet" 
      type="text/css" 
      href="/stylesheets/application.css" 
      media="only screen and (min-device-width:481px)">
<link rel="stylesheet" 
      type="text/css" 
      href="/stylesheets/mobile.css" 
      media="only screen and (max-device-width: 480px)">

This works by querying the browser for its device width. That way, desktop browsers should grab the 'application.css' stylesheet and mobile browsers, with their smaller screen, will find the 'mobile.css'.

So now when you come here on an iPhone (or most mobile browsers) you should see something like this:

iPhone optimised

If I just made your day a little better then thank me with a coffee or maybe a a pizza