由jquery mobile在手機間隙實現的方向更改事件

Question

有人能讓我知道jquery mobile在手機間隙中的方向更改事件的正確代碼嗎？我在哪裏以及如何實現這個orientationChange功能？

Answer 1

$(window).bind('orientationchange', _orientationHandler); 

然後在_orientationHandler功能，有類似：

if(event.orientation){ 
     if(event.orientation == 'portrait'){ 
        //do something 
     } 
     else if(event.orientation == 'landscape') { 
        //do something 
     } 
} 

Answer 2

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

您可以在綁定功能的情況下，參數添加resize事件，如果你的目標iOS和orientationchange不起作用。由於改變方向也會觸發調整大小事件。

Answer 3

以下代碼應該適用於所有瀏覽器，以檢測方向更改。它不使用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 4

我使用這個在我的手機模板，orientationChange事件是不會觸發iOS上的Safari瀏覽器7：

// 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