[Plugin: CSS & JavaScript Toolbox] Mobile device

Hi Simon,

Thanks for your question. There are a number of techniques that you can implement, which can provide support for mobile devices.

1) Use @media queries (CSS3) to detect things like:
– width and height (of the browser window)
– device width and height
– orientation – for example is the phone in landscape or portrait mode?
– resolution

An example for detecting the iPhone can be represented with the following code:

@media only screen and (max-device-width: 480px) {
       /*    CSS overrides go here   */
}

You can also reference an external stylesheet:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

ProtoFluid code (shown below) is handy to use if you are concerned the user has a normal desktop browser but using a very tiny window.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
       /*    CSS overrides go here   */
}

To make sure that your website loads zoomed in on your phone-friendly layout rather than zooming out, you would also need to put this code near the top of your header.php file:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

2) Use JavaScript code to detect if it is a mobile device and then redirect the user to the ‘mobile’ version of the website.

A script you could use written by the talented Michael Nilsson is shown below.

<script type="text/javascript">

var mobile = function(){
    return {
        detect:function(){
            var uagent = navigator.userAgent.toLowerCase();
            var list = this.mobiles;
            var ismobile = false;
            for(var d=0;d<list.length;d+=1){
                if(uagent.indexOf(list[d])!=-1){
                    ismobile = true;
                }
            }
            return ismobile;
        },
        mobiles:[
            "midp","240x320","blackberry","netfront","nokia","panasonic",
            "portalmmm","sharp","sie-","sonyericsson","symbian",
            "windows ce","benq","mda","mot-","opera mini",
            "philips","pocket pc","sagem","samsung","sda",
            "sgh-","vodafone","xda","palm","iphone",
            "ipod","ipad","android"
        ]
    };
}();

if(mobile.detect()){
    alert('You are using a mobile phone to view this page..');
}else{
    alert('You are using a desktop browser to view this page..');
}

</script>

3) There are a number of mobile themes, mobile optimisers, and mobile detection plugins – both premium and free, which you may also consider trying.

I have been working on a website called Glow Guides – http://glowguides.com.au and wanted to quickly optimise the website for the iPhone. Anyway, this is the script I used and placed at the bottom of footer.php before the closing body tag, which seemed to work well doing it this way.
<meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=0.5, user-scalable=yes" />

I chose an initial value that I felt looked good on the iPhone, and selected a maximum scale value so when users pinch-zoom it doesn’t zoom in too far. Also, you must declare user-scalable=yes for the pinch zoom to work.

Regards,
Damo