Javascript get mobile screen width after orientation change

Question

I am capturing the orientationchange event like this:

            $(window).bind( 'orientationchange', function(e){

            });

How can I get the new screen width and height in pixels after the orientationchage?

I have tried screen.width but this doesn't change, it remains as the initial width, even after orientation change.

Answer 1

$(window).bind( 'orientationchange', function(e){
    var ori = window.orientation,
        width = (ori==90 || ori==-90) ? screen.height : screen.width;
});

Answer 2

Also you can use screen.availWidth. It gets changed with orientation.

Answer 3

If you are using the meta tag viewport you could also update that tag (with jquery example:)

        function adapt_to_orientation() {
        var ori = window.orientation;
        var screenwidth = (ori==90 || ori==-90) ? screen.height : screen.width;
        var screenheight = (ori==90 || ori==-90) ? screen.width : screen.height;
                  // resize meta viewport
                  $('meta[name=viewport]').attr('content', 'initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width='+screenwidth + ',height=' + screenheight);
                }   
        adapt_to_orientation();
        $(window).bind( 'orientationchange', adapt_to_orientation);

Answer 4

Use $(window).resize, it runs after orientationchange

$(window).resize(function(){
        //your logic
});