Javascript gets the width of a mobile phone screen after changing orientation

Question

I record the orientationchange event as follows:

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

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

I tried screen.width , but this does not change, it remains as the initial width even after changing the orientation.

Answer 1

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

Answer 2

If you use the meta tag viewer, you can also update this 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 3

Also you can use screen.availWidth . It changes with orientation.

Answer 4

Use $ (window) .resize , it starts after changechange

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