使用javascript檢測方向變化

Question

使用javascript可以檢測iPad或Galaxy Tab上瀏覽器方向的變化嗎？我認爲可以使用CSS媒體查詢。

Answer 1

UPDATE：

你可能想看看

jQuery mobile orientationchange

或普通JS一：

window.addEventListener("orientationchange", function() { 
alert(window.orientation); 
}, false); 

---

年長的答案

http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/

Safari瀏覽器在iPad上不支持的window.orientation屬性，所以如果需要的話，你可以用它來確定用戶是否在水平或垂直模式。作爲對此功能的提醒：

window.orientation is 0 when being held vertically 
window.orientation is 90 when rotated 90 degrees to the left (horizontal) 
window.orientation is -90 when rotated 90 degrees to the right (horizontal) 

當設備旋轉時，還會觸發窗口對象上的orientationchange事件。

您還可以使用CSS媒體查詢，以確定是否在垂直或水平方向正在舉行的iPad，比如：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

---

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

<script type="text/javascript"> 
var updateLayout = function() { 
    if (window.innerWidth != currentWidth) { 
    currentWidth = window.innerWidth; 
    var orient = (currentWidth == 320) ? "profile" : "landscape"; 
    document.body.setAttribute("orient", orient); 
    window.scrollTo(0, 1); 
    } 
}; 

iPhone.DomLoad(updateLayout); 
setInterval(updateLayout, 400); 
</script> 

Answer 2

window.orientation是你在找什麼。這裏還有一個onOrientationChange事件 作品爲Android，iPhone和，我主要肯定的是，iPad的

Answer 3

添加到@ mplungjan答案，我發現使用webkit「本地」（我真的不怎麼稱呼它）事件，'deviceorientation' 。

在Mozilla Developer network他們有一個很好的解釋，如何規範webkit和Gecko之間的幫助我解決這個問題。

Answer 4

可以使用orientationChange事件，像這樣：

window.addEventListener('orientationchange', function(){ 
    /* update layout per new orientation */ 
}); 

Answer 5

您可以使用mediaMatch評估CSS媒體查詢，例如

window 
    .matchMedia('(orientation: portrait)') 
    .addListener(function (m) { 
     if (m.matches) { 
      // portrait 
     } else { 
      // landscape 
     } 
    }); 

CSS媒體查詢在orientationchange之前觸發。如果您想捕捉事件的結束（旋轉完成時），請參閱mobile viewport height after orientation change。

Answer 6

一個易於使用的片段：

function doOnOrientationChange() 
{ 
    switch(window.orientation) 
    { 
     case -90: 
     case 90: 
      // alert('landscape'); 
      $('#portrait').css({display:'none'}); 
      $('#landscape').css({display:'block'}); 

      break; 
     default: 
      // alert('portrait'); 
      $('#portrait').css({display:'block'}); 
      $('#landscape').css({display:'none'}); 
      break; 
    } 
} 

window.addEventListener('orientationchange', doOnOrientationChange); 

// First launch 
doOnOrientationChange(); 

Answer 7

從「Cross-device, cross-browser portrait-landscape detection」

這是一個關於找出一個移動設備是處於縱向或橫向模式;你不需要關心它的方向。對於所有你知道的，如果你把你的iPad倒過來，它是在肖像模式。

$(window).bind("resize", function(){ 
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0; 
}); 

90代表景觀，0代表縱向，跨瀏覽器，跨設備。

window.onresize事件隨處可用，它總是在正確的時間觸發;不要太早，永遠不要太晚。事實上，屏幕的大小也總是準確的。