我尝试放置一个bottom-div，正如它的名字所说，固定在div的最底部，当键盘打开时，它应该被向上推（在键盘上方，因为现在视口高度应该改变）。然而，问题是，这并没有发生。我也知道这和很多人的问题完全相反，但不知何故，这并没有发生在我身上。
我做错了什么？

<div className="custom-modal">
      <div className="modal-content">
        {/* Your modal content goes here */}
        <h2>Title</h2>
        <p>Modal body content</p>
        <input type="text" placeholder="Enter text" />
      </div>
      <div className="bottom-div">
        {/* Your bottom div content */}
        <button>Submit</button>
      </div>
    </div>

.custom-modal {
  position: relative;
 
}


.bottom-div {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff; 
 
}

检查此code pen here

编辑：现在在samsung internet for android浏览器上测试了一下，看起来效果不错，那么Chrome会不会是这个问题的原因呢？
编辑2经过一些挖掘，似乎确实，问题是Android上的Chrome如何使用OSK（屏幕键盘）以及布局视口和视觉视口的调整大小行为。如下所述：

从Chrome 108开始，Android上的Chrome将调整其视口大小调整行为，以便在显示屏幕键盘时不再调整布局视口的大小。
所以，为了回到resize的行为，我所要做的就是在index.html中写下：

<meta
      name="viewport"
      content="width=device-width, initial-scale=1 interactive-widget=resizes-content"
    />

现在问题来了：这是一个好的解决方案吗？它似乎已经解决了我的问题，但这是一个跨浏览器的问题吗？如官方页面所述：
这将使Android上Chrome的行为与iOS、iPadOS、Windows和CrOS上的Chrome、iOS和iPadOS上的Safari以及iOS、iPadOS和Windows上的Edge的行为保持一致。
所以要修改这将意味着跨浏览器将以不同的方式工作？
参考链接：https://developer.chrome.com/blog/viewport-resize-behavior/#side-effects-of-each-behavior

编辑3：正如怀疑的那样，在iOS的Safari和Chrome上，行为保持不变（固定的div不会上升，因为键盘显示时布局不会调整大小）。在iPhone 12和iPhone 12 Pro上进行了测试，无论是在Chrome还是Safari上。有解决方案吗？