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

Posted 2023-05-07

【中文标题】在移动设备上，如何在屏幕方向为横向时显示叠加层并在纵向时将其删除？ [复制]

【英文标题】：On mobile, how can I display an overlay when the screen orientation is in landscape and remove it when in portrait? [duplicate]

【发布时间】：2017-03-08 12:39:46

【问题描述】：

我想在仅在移动设备上显示叠加层，当方向为横向时警告用户切换到纵向模式，并且我希望在以下情况下移除叠加层检测到纵向方向，无需刷新页面。我的代码目前有效，但仅在页面刷新时才有效。

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

JS 小提琴示例：https://jsfiddle.net/mrx7a0q5/

实际使用的 JS：

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");

【问题讨论】：

用css来做呢？ Media Queries

@Media Queries，你不必使用 css。 javascript/jQuery 完全可以做到这一点。

【参考方案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，它会做横向视图的事情。

有关方向变化的更多信息，您可以阅读以下内容：

Detect change in orientation using javascript

jQuery mobile orientationchange