使用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事件随处可用，它总是在正确的时间触发;不要太早，永远不要太晚。事实上，屏幕的大小也总是准确的。