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.

Have you seen the recommendations [here](http://stackoverflow.com/questions/8508014/javascript-to-detect-mobile-browser-screen-width)? — barry, Nov 02 '12 at 17:24

score 12 · Accepted Answer · edited Nov 04 '16 at 00:31

12

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

edited Nov 04 '16 at 00:31

Walf

8,535
2
44
59

answered Nov 02 '12 at 17:23

Blazemonger

90,923
26
142
180

I'm not sure that this would be any *faster*, but there's the option of: `width = Math.abs(window.orientation) == 90 ? screen.height : screen.width;` Which at least saves assigning a variable and a double-assessment of the same variable. (But a +1 for switching to a ternary between my first seeing the question -on mobile- and commenting.) – David Thomas Nov 02 '12 at 17:40
@DavidThomas It's a micro-optimization. The only reason I added the `ori` variable was to keep the line from being too long. – Blazemonger Nov 02 '12 at 17:43

score 5 · Answer 2 · answered May 18 '15 at 10:01

5

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

answered May 18 '15 at 10:01

Sarim

3,124
2
20
20

score 2 · Answer 3 · answered Jul 02 '13 at 16:38

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);

score 2 · Answer 4 · answered Sep 19 '17 at 16:39

2

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

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

answered Sep 19 '17 at 16:39

Alain Gauthier

820
1
12
14

1

I voted this answer because previous answers are using previous widht and height ( the ones before rotation, i think the event is triggered right after the mobile is rotated while the window size (width) is still the same one). $(window).resize is triggered after the rotation is complete. – Drk_alien Jan 09 '18 at 11:15

Javascript get mobile screen width after orientation change

4 Answers4

Linked