隐藏 URL 栏时 IOS Safari 中的不可点击区域答案

【问题标题】：Unclickable area in IOS Safari when the URL bar is hidden隐藏 URL 栏时 IOS Safari 中的不可点击区域
【发布时间】：2021-10-04 01:13:03
【问题描述】：

我正在构建一个应该填充视口的div，并且底部有一些可点击的元素。 Html 看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .container {
        width: 100vw;
        height: 100%;
        position: fixed;
      }

      .player-root {
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
      }

      .unclickable-area {
        background-color: grey;
        color: white;
        height: 65px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="player-root">
        <div class="unclickable-area" id="unclickable">Unclickable</div>
      </div>
    </div>

    <script id="rendered-js">
      document.onclick = function () {
        console.log("clicked");
      };

      document.getElementById("unclickable").onclick = function () {
        alert("clicked");
      };
    </script>
  </body>
</html>

这里是codepen 重现此问题。

我使用position: fixed，所以高度可以填满视口。它工作正常，除了在 iPhone 上。当设备处于横向模式并且 URL 栏被隐藏时，即使我在 document 上添加了事件侦听器，unclickable area 也无法触发任何单击事件。 The demo that the area is not clickable

但是，如果我向下交换并显示 URL 栏，则可以单击可点击区域。 The demo that the area is clickable

我认为这是由于 IOS Safari 的视口问题，但我找不到有关此问题的文档/问题。

转载iOS版本：v14.5

【问题讨论】：

标签： html css ios mobile-safari

【解决方案1】：

所以经过研究，我发现这个问题是由移动 safari 中初始包含块的奇怪行为引起的。 As this picture shows，初始包含块的高度比视口短，这使得底部的区域不可点击。我们可以通过将html 和body 扩展到100vh 以适应视口来解决此问题。

【讨论】：