2012-04-16 57 views
2

我需要计算orientationchange上的屏幕宽度。如何在Android上获取页面宽度orientationchange在JQuery/Javascript中的事件?

我做这样的:

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

我已经使用10ms的延迟来计算屏幕的宽度,但在Android上它仍然无法正常工作......

我的屏幕是小320x480。如果我以肖像开始并更改为横向,则获得320像素。当我回到肖像,我控制台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) 

回答

6

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

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

    $(窗口).bind( 'orientationchange',函数(事件){ 如果(event.orientation == '画像'){// 改变你的页面的风景 }否则,如果(事件。 orientation =='landscape'){ //将您的页面改为肖像 }
    });

+0

啊。我喜欢第二种解决方法。非常好!感谢您指出了这一点! – frequent 2012-04-16 13:19:45

+0

好的。我有一个解决方案,它可以跨设备(不仅在Android上)。看到我的答案 – frequent 2012-04-16 16:04:45

相关问题