如何在Jquery / Javascript中的orientationchange事件上获取Android页面宽度?

时间:2012-04-16 12:34:05

标签: javascript jquery android width orientation-changes

我需要在orientationchange上计算屏幕宽度。

我这样做:

$(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);
   });

我已经使用了10毫秒的延迟来计算屏幕宽度,但在Android上它仍然无效......

我的屏幕是320x480。如果我以肖像开始并改为风景,我会得到320px。当我改回画像时,我控制了480px,所以宽度似乎总是在方向实际改变之前计算。

如果可能,我不想增加超时。有什么其他方法可以确保$ wrapWidth仅在Android完成“转动”屏幕时计算?

感谢您的帮助!

修改
来自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)

1 个答案:

答案 0 :(得分:6)

这是Android设备中的一个错误。你可以做两件事。

  1. 根据this,将超时更改为100毫秒。显然它会解决问题。
  2. 由于在原始发生变化之前触发了事件,因此请使用相反的宽度和高度值。像:

    $(window).bind('orientationchange',function(event){         if(event.orientation =='portrait'){             //更改您的横向页面         } else if(event.orientation =='landscape'){             //将页面更改为肖像         }
        });