当键盘打开时，移动 Safari 上 html 外部有空白

Question

我在移动 Safari 上的 JavaScript 库中有一个非常奇怪的错误，我尝试用一个简单的示例重现该错误：

我有基本的 css 和 html:

html, 
body {
    margin: 0;
    padding: 0;
    font-family: monospace;
}
body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}
#term {
    background: black;
    color: #ccc;
    height: 100%;
}
h1 {
    margin: 0;
    font-weight: normal;
}

html：

    ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div id="term" contenteditable>
    <h1>HELLO Mobile</h1>
    ...

当我在移动 Safari 上打开网站并打开虚拟键盘时，我可以向下滚动到内容之外。

这是当我将鼠标悬停在 body 上时来自 BrowserStack 的屏幕截图，我无法将鼠标悬停在 html 上以突出显示它。

有人知道如何解决这个问题吗？它看起来像一个基本页面。

以下是网站链接：https://terminal.jcubic.pl/mobile.html

正如您从代码中看到的，我尝试通过添加以下内容来解决问题：

-webkit-fill-available

在一篇文章中找到：Chris Coyier 的移动 WebKit 中 100vh 的 CSS 修复。但这并没有带来任何改变。

有没有办法去掉那个空白，看来连CodePen也有这个问题。这是 Mobile Safari 中的错误吗？有破解方法可以修复吗？

编辑：

我认为这是一个长期存在的问题，苹果并不关心用户和开发者有多痛苦。

打开虚拟键盘时，iOS 上的 Safari 会滚动到元素之外

Answer 1

试试这个：

JS 文件：

const appHeight = () => {
 const doc = document.documentElement
 doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

CSS 文件：

:root {
 --app-height: 100%;
}
html,
body {
 padding: 0;
 margin: 0;
 overflow: hidden;
 width: 100vw;
 height: 100vh;
 height: var(--app-height);
}

可能有帮助

Answer 2

我找到了一个解决方案，其中视口不会被键盘上推，并且您可以在键盘上方放置自定义视图（例如输入）。

1。禁用视口的移动 为了实现这一点，您必须在输入元素获得焦点时将其不透明度设置为 0，等待一毫秒，然后恢复其不透明度。

this.input.nativeElement.addEventListener("focus", () => {

  this.renderer.setStyle(this.input.nativeElement, 'opacity', 0)
  setTimeout(() => {
    this.renderer.setStyle(this.input.nativeElement, 'opacity', 1)
  }, 1)

没有不透明度的输入不会因键盘事件而移动。

2。视觉视口 现在您可以监听 VisualViewport 的变化并将元素（例如）输入放置在键盘上方：

window?.visualViewport?.addEventListener('resize', () => {

  const position = window!.visualViewport!.height - 
  this.input.nativeElement.offsetHeight
  this.renderer.setStyle(this.vInputNoteContainer.nativeElement, 'top', position 
  + 'px')
})

请注意，我在此代码示例中使用了 typescript 和 Angular。特别是对于更改元素的样式属性。如果您需要进一步解释，请告诉我。

Answer 3

-2
投票

你尝试过吗：

body {
margin: 0 auto;
}

当键盘打开时，移动 Safari 上 html 外部有空白

问题描述投票：0回答：3

3个回答

最新问题

当键盘打开时，移动 Safari 上 html 外部有空白

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3