移动键盘上方的位置元素

Question

我正在尝试将元素直接放置在移动键盘上方。 即：绝对位置/固定到页面底部，但被键盘向上推（或向上推键盘的等效高度）。

通常这是与所期望的相反的行为，并且会有很多人为保持底部元素而奋斗。 我觉得我记得以前打过同样的战斗......

但现在我想让它移动，它不是。 （当然！）

我现在的重点是 iOS Safari，但更喜欢跨浏览器。

似乎旧版本的 iOS 在键盘打开时更改了window.innerHeight ，无论好坏。 但情况已不再如此。 这可以解释为什么我没有看到我期望看到的......

我一直在玩各种定位的父元素，但没有运气。

这甚至可能吗？ 还是键盘现在完全脱离了视口？

Answer 1

这不可能。 键盘似乎是它自己的实体，或者如您所说，与视口分离。

Answer 2

尽管您无法将元素完全固定到键盘上，但我建议您可以使用 JavaScript 并添加一个类，将固定元素提升到与键盘相同的高度。

可以在此处找到键盘尺寸： iPhone 屏幕键盘的高度是多少？

Answer 3

现在可以使用VisualViewport API 来监听视口变化并读取它的值。 实际上，它不会立即发送事件，因此体验可能会滞后。