Question

是否可以使用javascript检测iPad或Galaxy Tab上浏览器方向的变化？我认为使用css媒体查询是可能的。

Answer 1

<强>更新

您可能想要查看

或简单的JS：

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

MDN:

window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});

旧答案

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

iPad上的Safari确实支持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

您可以像这样使用orientationchange事件：

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

Answer 3

我意识到没有人提及将设备倒置在此线程中会发生什么。保持水平时，window.orientation返回-90或90。垂直保持时返回0或180。有些设备可以，有些则不支持倒置。我建议，

window.addEventListener("orientationchange", function() {
  
  if ( window.orientation == 0 || window.orientation == 180) {
    // WHEN IN PORTRAIT MODE
    
  } else {
    // WHEN IN LANDSCAPE MODE
    
  }
}, false);

还要注意，window.orientation在台式机上返回undefined。

Answer 4

window.orientation就是你要找的东西。还有一个onOrientationChange事件适用于Android，iphone，我非常肯定，适用于ipad

Answer 5

添加@mplungjan答案，我发现使用webkit“native”（我真的不怎么称呼它）事件，“ deviceorientation ”会有更好的结果。

在Mozilla Developer network中，他们对如何在webkit和Gecko之间进行规范化有了很好的解释，这有助于我解决这个问题。

Answer 6

您可以使用mediaMatch来评估CSS媒体查询，例如

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

CSS媒体查询在orientationchange之前触发。如果您希望捕获事件的结尾（轮换完成时），请参阅mobile viewport height after orientation change。

Answer 7

易于使用的代码段：

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 8

来自“Cross-device, cross-browser portrait-landscape detection”

这是关于查明移动设备是处于纵向还是横向模式;你不需要关心它的方向。如你所知，如果你把iPad颠倒过来，它就处于纵向模式。

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

90表示横向，0表示纵向，跨浏览器，跨设备。

window.onresize事件随处可用，并且总是在正确的时间触发;永远不会太早，永远不会太晚。事实上，屏幕的大小也始终准确。

JavaScript版本就是这个，如果我错了，请纠正我。

  function getScreenOrientation() {
    screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
    console.log("screenOrientation = " + screenOrientation);
  }
  window.addEventListener("resize", function(event) {
    getScreenOrientation();
  });
  getScreenOrientation();

使用javascript检测方向的变化

8 个答案: