在移动设备上，如何在屏幕方向为横向时显示叠加层并在纵向屏幕方向时将其删除？

Question

我想仅在移动设备上显示叠加层，警告用户在方向处于横向，我希望在检测到纵向方向时删除叠加层，而无需刷新页面。我的代码目前有效，但仅在刷新页面时有效。

我做了一个jsfiddle作为例子，但实际代码不同（如下所示），但我相信概念是一样的。请将结果 window 调整为横向并点击运行查看应用的叠加层。我的目标是使 JS 应用而无需再次点击运行或刷新页面。

JS FIDDLE 示例：https://jsfiddle.net/mrx7a0q5/

实际使用的 JS IM：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth > window.innerHeight) == true) {

    $('.ls-overlay').css("display", "block");
    console.log("displaying");
} else {
    $('.ls-overlay').css("display", "none");
    console.log("not displaying");

}

Answer 1

这样的事情可以帮助你：

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    //alert(screen.orientation);

  var orr = screen.orientation;

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth > window.innerHeight) == true) {
  if (orr =='0'){

  ///portrait view///
 $('.ls-overlay').hide();


  } else if(orr =='-90'){

  ///landscap view///
  $('.ls-overlay').show();



  }

 } 
}, false);

上面的代码首先添加一个事件侦听器并侦听 orientationchange，然后在方向更改时检查用户设备是手机还是平板电脑，然后检查变量 orr 是 0，它将执行纵向视图的操作，如果是 -90，它将执行横向视图的操作。

有关 orientationchange 的更多信息，您可以阅读：

Detect change in orientation using javascript

jQuery mobile orientationchange

在移动设备上，如何在屏幕方向为横向时显示叠加层并在纵向屏幕方向时将其删除？

On mobile, how can I display an overlay when the screen orientation is in landscape and remove it when in portrait?

javascript

jquery

android

ios

jquery-mobile