由jquery mobile在电话差距中实现方向改变事件

有人可以通过手机间隙中的jquery mobile告诉我正确的方向更改事件代码吗？ 我在哪里以及如何实现此orientationChange函数？

Answer 1

 $(window).bind( 'orientationchange', function(e){ if ($.event.special.orientationchange.orientation() == "portrait") { //Do whatever in portrait mode } else { //Do Whatever in landscape mode } }); 

如果您的目标是iOS并且orientationchange不起作用，则可以在bind函数的event参数中添加resize事件。 由于更改方向也会触发resize事件。

Answer 2

以下代码应适用于所有浏览器以检测方向更改。 它不使用jquery移动事件，但似乎适用于大多数设备。

 1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase()); 2. var ev = isIOS ? 'orientationchange' : 'resize'; 3. var diff = (window.innerWidth-window.innerHeight); 4. $(window).bind(ev,function(){ 5. setTimeout(function(){ 6. if(diff*((window.innerWidth-window.innerHeight)) < 0) 7. orientationChanged(); 8. },500); 9. }); 

第2行占用任何非Safari浏览器的resize事件，因为其他设备中的其他浏览器比方向更改事件更一致地占用resize事件。 http://www.quirksmode.org/m/table.html

第5行在超时时执行检查，因为某些Android本机浏览器不会立即占用新的宽度。

第6行为了进行方向更改，新旧高度和宽度差异的乘积应为负数。

Answer 3

我在我的移动模板中使用此function，因为在iOS 7 Safari上未触发orientationchange事件：

  // ORIENTATION CHANGE TRICK var _orientation = window.matchMedia("(orientation: portrait)"); _orientation.addListener(function(m) { if (m.matches) { // Changed to portrait $('html').removeClass('orientation-landscape').addClass('orientation-portrait'); } else { // Changed to landscape $('html').removeClass('orientation-portrait').addClass('orientation-landscape'); } }); // (event is not triggered in some browsers) $(window).on('orientationchange', function(e) { if (e.orientation) { if (e.orientation == 'portrait') { $('html').removeClass('orientation-landscape').addClass('orientation-portrait'); } else if (e.orientation == 'landscape') { $('html').removeClass('orientation-portrait').addClass('orientation-landscape'); } } }).trigger('orientationchange'); // END TRICK