事发原因

起这个标题，是因为我遇到了一个很恶心的问题，我有一个弹出来的 input，在 iphone 唤醒键盘之后再退下键盘后。会发现底部会出现一个白边（夜间模式就是黑边）而且无法消除。

于是就用标题的搜索方法，得到了类似以下的解决方案
这里我就不进行封装了。我当时是利用类似的规则，在 App.vue 目录下直接给全局的所有 input 都绑定了这个事件，它能解决这个问题，但是并不是很好。而且我也不是很推荐，所以这里就不进行过多的说了

document.body.addEventListener("focusout", () => {
        setTimeout(() => {
          const scrollHeight =
                  document.documentElement.scrollTop || document.body.scrollTop || 0;
          window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
      })

下面才是我认为真正有效且安全的方法

安全区

IOS 的安全区
先阐述一下这个东西阐述的原因
从 iphone X 开始，iphone 似乎全部都是圆角屏幕，也因为它没有按钮了取而代之的是下面一个条条来控制手机。那么如果我们的页面在那个条条的地方有交互，那就很难点得到了，一个是不方便，另一个是很容易误触。所以就引入了一个安全区的东西。系统会默认在页面中加入安全区，这就是导致为什么看起来输入法落下以后，看起来底部似乎有一个白条条的原因。事实上，我在测试的时候，它是一开始就有的，如果你把页面一直往下滑，就会发现，你即时不唤醒输入法，它就已经存在了

解决方案

我的项目是 vue3 项目。首先需要在 index.html 页面添加一行代码

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

这行代码的关键点是在 viewport-fit=cover 上
我的代码已经有这个 meta 了,只是少了这一个东西

viewport-fit
是专门针对 iOS 设备的属性，用于控制网页在非标准屏幕（如 iPhone 的刘海屏）上的显示方式。它有以下三个可选值：
auto（默认值）：由浏览器自动决定如何适应屏幕，可能会忽略安全区域（Safe Area），导致内容被刘海或圆角遮挡。
cover：网页内容会填满整个屏幕（包括刘海区域），但需要通过 CSS 的 env(safe-area-inset-*) 来避免内容被遮挡。
contain：网页内容会被限制在安全区域内，避免与刘海或圆角重叠，但可能会留下空白边距。

viewport-fit=cover 配置上了以后，页面中就不会再有安全区了，也就从根本上解决了这个问题，
如果某块地方的内容出现在了设备的安全区上，那么可以采用下面的方法，把元素的高度增加一些。达到更改让元素被安全区顶起来的视觉效果

下面是一个简单的 css 获取安全区高度的示例

  /* 兼容 iOS 11-12 */
  padding-top: constant(safe-area-inset-top);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);

  /* iOS 13+ */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);

我的项目只需要考虑下方的安全区，其他不用考虑。所以我自己封装了一个小组件，下面是我的代码，用于参考一下

<template>
<div class="safe-area w-dvw flex justify-center items-center">
  <slot>
    <span class="text-gray-900 opacity-10">安全区</span>
  </slot>
</div>
</template>
<style scoped>
  .safe-area {
    min-height: env(safe-area-inset-bottom)
  }
</style>