iOS15点击输入框滚动到底部出现多余黑边，如何修复或移除？

问题原因 #

1. 你的代码存在语法错误：<div style="100vh !important;"> 缺少CSS属性名，应该指定height或min-height属性，属性值才是100vh。
2. iOS 15后Safari浏览器调整了视口高度计算逻辑：默认100vh的高度会排除底部地址栏/工具栏的高度，同时安全区适配逻辑也有调整，直接使用100vh会导致页面实际高度小于屏幕可用高度，滚动到底部时露出底部黑边。

修复方案 #

• 首先在<head>中修改viewport配置，开启全屏适配：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• 调整全局高度适配CSS，兼容WebKit内核和iOS安全区：

html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* 适配WebKit内核自动计算可用视口高度 */
  min-height: -webkit-fill-available;
}
.page-content {
  /* 兼容高低版本iOS安全区高度，叠加到100vh上填满底部空白 */
  min-height: calc(100vh + constant(safe-area-inset-bottom));
  min-height: calc(100vh + env(safe-area-inset-bottom));
}

• 修改HTML代码，把页面内容放到适配好高度的容器内：

<body>
    <div id="root">
        <div class="page-content">
            // 页面内容写在这里
        </div>
    </div>
</body>

• 如果存在输入框唤起软键盘后仍出现黑边的情况，添加以下JS逻辑修复软键盘唤起后的高度偏差：

const originalHeight = window.innerHeight
const pageContent = document.querySelector('.page-content')
window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight
  pageContent.style.height = currentHeight < originalHeight ? `${currentHeight}px` : 'auto'
})

内容的提问来源于stack exchange，提问作者tempra