软键盘不会在 iPhone 上向上推元素答案

【问题标题】：soft keyboard does not push elements up on iPhone软键盘不会在 iPhone 上向上推元素
【发布时间】：2023-03-05 13:19:01
【问题描述】：

我的网络应用中有一个发布表单。在 Android 手机上，当 contenteditable div 聚焦时，软键盘会将所有其他 html 元素向上推，所以很好。然而，在 iPhone 上它不会做同样的事情，但键盘只是覆盖了位于屏幕下半部分的所有其他元素。我用vue.js构建了页面，代码如下：

<!DOCTYPE html>
 <html>
  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
     <base href="/">
     <title>iyf</title>
     <style>html { scroll-behavior: smooth }</style>
  </head>
  <body>
  <main class="posting">
    <div class="creatingPost">
      <div class="nav">
        <button class="cancel">cancel</button>
        <p class="title">create</p>
        <button class="confirm">done</button>
      </div>
      <div class="contents">
        <div class="text" contenteditable="true"></div>
      </div>
      <div class="wrapper">
        <div class="previews">
          <div class="photos">
          </div>
          <div class="location">
          </div>
        </div>
        <div class="nav">
          <div class="inclusions">
            <input type="file"/>
            <div class="upload-icon-photo" ></div>
            <div class="upload-icon-video"></div>
            <div class="upload-icon-location"></div>
          </div>
        </div>
      </div>
    </div>
  </main>
 </body>
</html>

【问题讨论】：

标签： html ios iphone meta-tags iphone-softkeyboard

【解决方案1】：

我在 iphoneX (XR) Chrome 上也遇到了这个问题，可能网页在 iphone7,8 上可以正常工作。

两个 ios-Chrome 都是最新版本的 Chrome。

麻烦了！

也在寻找解决方案。

【讨论】：

【解决方案2】：

您可以在任何使用 Chrome iOS 的网站（包括 www.google.com）上观察到这一点，最新版本的 Chrome iOS 引入了这个键盘无法向上推页面内容的错误。

这里还有一个铬错误： https://bugs.chromium.org/p/chromium/issues/detail?id=916806

【讨论】：