解决 ios 下 safari 浏览器横屏判断和 display: 'none' 失效的问题

问题描述

前两天做的 在手机页面上显示摄像头视频 在ios 的 safari 浏览器上横屏不能隐藏提示层，其实本质还是标题所示：”ios 下 safari 浏览器横屏判断和 display: 'none' 失效“ 的问题。

解决问题

虽然借来了苹果手机 (iphone 7 plus, ios 14)，重现了老板说的问题。可是由于没有 mac 电脑，不能真机联调。所以想到了 vConsole 这个腾讯开发的移动端调试工具。使用也很简单：

安装 vConsole

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

打印测试

下面是原来的测试是否横屏的代码：

// 对于支持 screen 的浏览器
if (window.screen) {
  document.getElementById('block_land').style.display =
    screen.width > screen.height ? 'none' : 'block'
}

首先打印出 screen.width 和 screen.height，经测试发现横屏后这个数值和竖屏是一样的没有变化。

查找问题解决办法

那真正能在 ios 下判断横屏的代码是什么？经过搜索发现要用到一个己经废弃的 api : 'window.orientation'。具体文章请看：undefined is not an object (evaluating 'screen.orientation.angle') (opens new window)。要具体判断代码的话在这里 DETECT IOS DEVICE ORIENTATION WITH JAVASCRIPT (opens new window)。

// ios 下使用 window.orientation
if (Math.abs(window.orientation) === 90) {
  // Landscape
  console.log('Landscape')
  document.getElementById('block_land').style.display = 'none'
} else {
  // Portrait
  console.log('Portrait')
  document.getElementById('block_land').style.display = 'block'
}

上面的代码在 ios 真机上测试能打印出正确的结果。可是提示层就是不隐藏。经过 gg 搜索**"style display none not working in safari"**发现下面这两篇文章：

Safari display: none (opens new window)

option.style.display = "none" not working in safari [duplicate] (opens new window)

其中都提到了 "visibility: hidden" ，于是报着试试的态度改成下面的代码：

// ios 下使用 window.orientation
if (Math.abs(window.orientation) === 90) {
  // Landscape
  console.log('Landscape')
  document.getElementById('block_land').style.visibility = 'hidden'
} else {
  // Portrait
  console.log('Portrait')
  document.getElementById('block_land').style.visibility = 'visible'
}

经过测试，果然奏效了。至此问题解决，欢迎伙伴留言一起交流学习啊。