iOS 15 通过固定位置、全屏内容最小化地址栏问题

Question

iOS 15 通过固定位置、全屏内容最小化地址栏问题

使用 iOS 15.0.2 Safari，当屏幕键盘关闭时，地址栏可以最小化，而无需更新视口高度。这会导致底部间隙，如果不按地址栏就无法删除该间隙。是否有任何已知的解决方法？通过使用嵌套容器，可以在没有任何设备旋转的情况下达到这种状态，但我能想到的最简单的可重现示例如下：

旋转至横向
专注于文本输入以调出屏幕键盘
旋转至纵向
按屏幕键盘上的“完成”

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: fixed;
  inset: 0;
  -webkit-text-size-adjust: 100%;
}
input {
  font-size: 16px;
}

Run Code Online (Sandbox Code Playgroud)

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#000000">
</head>
<body>
  <input type="text" />
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

zZe*_*epo 17

我最近遇到了同样的问题，将主体设置position为fixed在显示覆盖层时阻止滚动。一旦禁用滚动，Safari 就会停止渲染扩展的 iOS UI 所覆盖的下部区域，留下与屏幕截图中显示的相同的黑条。

当身体设置html.style.height为时设置为似乎可以解决问题。100vhposition: fixed

我构建了一个简单的示例页面，您可以在其中看到差异。打开页面后，您必须向按钮方向向下滚动一点才能折叠 Safari UI。然后，您可以通过单击按钮来切换position: fixed类code-to-fix-error（以修复错误）。

在我的滚动阻止示例中：将设为height也会calc(100vh - 1px)在弹出窗口处于活动状态时阻止 safari 原生橡皮筋/弹性滚动效果。不过，此更改应该仅适用于 iOS 设备。

const btnError = document.querySelector('button.error')
btnError
  .addEventListener('click', () => {
    btnError.innerHTML = document.documentElement.classList.toggle('code-to-fix-error')
      ? 'Fix active'
      : 'Fix inactive'
  })

let y = 0
const btnToggle = document.querySelector('button.toggle')
btnToggle
  .addEventListener('click', () => {
    const _doc = document.documentElement
    if (_doc.classList.contains('active')) {
      _doc.style.setProperty('--scroll-y', `0`)
      _doc.classList.remove('active')
      window.scroll(0, y)
      btnToggle.innerHTML = 'position: static'
    } else {
      y = window.scrollY
      _doc.style.setProperty('--scroll-y', `-${y}px`)
      _doc.classList.add('active')
      btnToggle.innerHTML = 'position: fixed'
    }
  })

Run Code Online (Sandbox Code Playgroud)

body {
  padding: 400px 0 0 0;
  margin: 0;
  inset: 0;
  -webkit-text-size-adjust: 100%;
  background-color: #435283;
  text-align: center;
  height: 8000px;
  width: 100%;
}

html.code-to-fix-error.active  {
  height: 100vh;
}

html.active body {
  top: var(--scroll-y);
  overflow: hidden;
  position: fixed;
}

button {
  appearance: none;
  line-height: 30px;
  padding: 0 10px;
  background-color: #FFF;
  color: #435283;
  border-radius: 3px;
}

Run Code Online (Sandbox Code Playgroud)

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#000000">

    <style>/* styles here */</style>
  </head>
  <body>
    <button class="error">Fix inactive</button>
    <button class="toggle">position: static</button>
    
    <style>/* script here */</style>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

谢谢！当作为固定容器的一部分时，“100vh”没有帮助，但当添加到“html”或“body”时，它确实解决了问题。 (3认同)

归档时间：	4 年，3 月前
查看次数：	16952 次
最近记录：	4 年，3 月前