CODEWITHSUNDEEP
javascriptjqueryandroidwidthorientation-changes
frequent
frequent

Reputation: 28503

how to get page width on Android on orientationchange event in Jquery/Javascript?

I need to calculate the screen width on orientationchange.

I'm doing it like this:

$(window).on('orientationchange', function(event){
   $(this).panelWidth("orientationchange")
   });

panelWidth: function (fromWhere) {
   window.setTimeout(function () {
      var $wrapWidth = $('div:jqmData(wrapper="true").ui-page-active').innerWidth();
      console.log( $wrapWidth );
      },10);
   });

I'm already using a 10ms delay to calculate screen width, but on Android it still does not work...

My screen is 320x480. If I start in portrait and change to landscape I get 320px. When I than change back to portrait, I console 480px, so the width always seems to be calculate before the orientation actually changes.

I don't want to increase the timeout if possible. What other ways are there to make sure $wrapWidth is only calculated when Android has finished "turning" the screen?

Thanks for help!

EDIT:
Some info from Jquery Mobile sourceode:

...as the actual screen resize takes place before or after the orientation 
change event has been fired depending on implementation (eg android 2.3 is 
before, iphone after). More testing is required to determine if a more reliable 
method of determining the new screensize is possible when orientationchange 
is fired. (eg, use media queries + element + opacity)

Upvotes: 2

Views: 2812

Answers (1)

rucsi
rucsi

Reputation: 516

This is a bug in the framwork Android devices. There are 2 things you could do.

  1. According to this, change you timeout to 100 ms. Apparently it will solve the problem.

  2. Because of the event firing prior the origination has changed, use the opposite values for width and height. Like:

    $(window).bind('orientationchange', function(event){ if(event.orientation == 'portrait') { // change your page for landscape } else if (event.orientation == 'landscape') { // change your page for portrait }
    });

Upvotes: 6

Related Questions