使用javascript检测方向的变化

IT技术 javascript css ipad accelerometer galaxy-tab
2021-01-26 15:20:31

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

6个回答

更新:

你可能想看看

jQuery移动方向改变

或普通的 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 事件会在window 对象上触发。

您还可以使用 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>
这也适用于 Windows Surface 平板电脑吗?我看到给定的答案有些过时,所以我想知道是否有人会碰巧知道。我尝试运行该脚本,但似乎只有开发人员控制台(在 Chrome 中)注册了方向更改。
2021-03-19 15:20:31
我发现了这一点:已弃用。不适用于新网站,从这里developer.mozilla.org/en-US/docs/Web/API/Window/... May-b 这个答案应该更新。
2021-03-28 15:20:31
似乎从 iOS 4.0 UIWebView 版本开始不再支持 Javascript window.orientation 属性,或者至少我经历过。因此,我发现通知 UIWebView 的内部 Javascript 有关方向更改的唯一方法是调用 [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"didRotateTo('%@')", orient]]; 其中 webView 是我的 UIWebView 和 orient 是当前设备方向的字符串表示。didRotateTo 是一个 javascript 函数,它接受一个参数(方向为字符串)
2021-04-07 15:20:31
对于轮询,orientationchange当设备的方向改变时会触发一个事件。
2021-04-09 15:20:31
这行得通吗? window.addEventListener("orientationchange", function() { console.log("the orientation of the device is now " + screen.orientation.angle); });
2021-04-13 15:20:31

你可以像这样使用orientationchange事件:

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

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

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

CSS 媒体查询在orientationchange. 如果您希望捕获事件的结束(旋转完成时),请参阅方向更改后的移动视口高度

来自“跨设备、跨浏览器的人像-横向检测

这是关于找出移动设备是处于纵向模式还是横向模式;你不需要关心它的方向。据您所知,如果您将 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();
当用户以纵向方向握住手机,然后打开虚拟键盘导致小屏幕上的宽度变得大于高度时,情况如何?用户仍然以相同的纵向方向握住手机,但您的方法可能会导致方向改变的误报结果。
2021-04-05 15:20:31
对我来说,使用 jquery 事件在 android 和 iphone 上都有效。api.jquerymobile.com/orientationchange
2021-04-05 15:20:31
@IlliaRatkevych 好点。然而,这可以通过检查双方自开始/自上次检查以来是否发生变化来轻松停止。
2021-04-09 15:20:31

我意识到没有人提到在这个线程中倒置设备时会发生什么。 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

至于 window.orientation 的弃用,目前还不清楚浏览器是否真的会停止识别它。您必须同时关注世界的 Android 和 iOS 方面。
2021-03-20 15:20:31