Now I've had some feedback on the basic website I wanted to see what I could do to get my website displaying in mobile format without having to create a whole other website just for a mobile audience. After some searching I came across this website: http://www.html5rocks.com/en/mobile/mobifying.html which gives some great tips for CSS selection using the media attribute on the CSS link.

I implemented some of the items into my website application and deployed a further demo site so I could do some testing of my own: http://demo.creative-jar.com/mvc-google-maps-mobile. Note how when you view this website in the desktop browser it looks just like my previous demo site: http://demo.creative-jar.com/mvc-google-maps.

When viewed on my Android phone the website is in its mobile 'version'. Everything is nicely zoomed in so I can see things clearly - including the Google Map - all done by simply implementing the steps detailed in the HTML5 Rocks website and then adjusting the iphone.css to suit the screen.

My thoughts rapidly returned to the iPhone that failed to display the Google Map. On my search for information on this problem I stumbled across this website: http://www.pluralsight-training.net/community/blogs/jimw/archive/2009/10/30/iphone-google-maps-api-and-the-iui-framework-can-t-we-all-just-get-along.aspx - it turns out this is likely to be a load order issue caused by the empty <div> tag, so I need to now get the mobile site loading slightly differently for mobile in order to get things displaying correctly. Trouble is, I need a mobile detector script of some description. I know I can use the media attribute in the CSS to get the website displaying as I want, however, how can I now detect that my website is displaying on a mobile device and therefore warrant this special treatment?