Out of curiosity I've been playing with jQuery to determine the browser's screen size, and it occurred to me that screen size could be used to determine whether or not a visitor was using an iPhone/iTouch to view the site.

So I used the following to test this:

$(document).ready(



    function() {



        var screenX = screen.width,

            screenY = screen.height;



        alert(X:  + screenX +  Y:  + screenY);



        if (screenX == 320 && screenY == 396) {

            $('div#wrap').css('background-color','#f00');

        }



        else if (screenY == 320 && screenX == 396) {

            $('div#wrap').css('background-color','#0f0');

        }

    }

);

On viewing the page via iPhone, I notice that the dimensions are consistently (regardless of orientation):

x: 320, y: 396

This is regardless of orientation. I haven't, as yet, attempted to use an onChange event to detect changes (mainly because I'm still so new at jQuery), but I wondered if there was a way to determine, via jQuery or plain javascript, the iPhone/iTouch's orientation?