Question

I’m trying to figure out how to change an embedded web page when the user rotates their phone from portrait to landscape mode – basically to load a view that is better suited to the wider screen format. Is this possible to do without calling a new page from the server, i.e. to drive it from within CSS/Javascript itself?

Thanks!

Answer 1

You can use the window.orientation property. Its value is the degree that the current mode of view is used. Here is a brief example:

function updateOrientation()
{   
    var orientation=window.orientation;
    switch(orientation)
    {

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

You can use this function on this event:

window.onorientationchange=updateOrientation;

Hope that helps!