logo标签列表

将元素定位在移动键盘上方

htmlcsscss-position
7
我正在尝试将一个元素定位在移动键盘正上方，即：将其绝对/固定定位于页面底部，但被键盘向上推（或已被向上推的键盘等效高度）。

通常这与所需的相反行为相反，许多人都在努力保持底部元素不变。我感觉以前也曾与这些问题作斗争……
但现在我想要它移动，却不能实现。（当然！）
我目前的重点是iOS Safari，但希望能够跨浏览器使用。
旧版本的iOS似乎在键盘打开时更改了window.innerHeight，好或坏难说。但现在不再是这样。这可能解释了为什么我没有看到期望的结果……
我一直在尝试使用各种位置的父元素，但都没有成功。
这是否可能？还是键盘现在完全分离了视口？
3个回答
2

不可能的。键盘似乎是自己的实体，或者像你说的那样，与视口分离。

2

虽然你无法精确地将元素固定到键盘上，但我建议你可以使用JavaScript并添加一个类来使固定元素的高度与键盘相同。

这里可以找到键盘的大小： iPhone屏幕键盘的高度是多少？

谢谢建议。如果有办法通过JS编程方式获取高度，那可能是一个合理的解决方案。我认为iOS版本、设备尺寸、方向甚至自定义扩展（例如giphy工具栏）的差异都使其不可行。即使我成功解决所有问题或找到了一个妥协，Android也无望。我猜想无法获取高度。如果可以，那可能意味着键盘和DOM交互的方式会预防这个问题的出现 :( - Chase
2

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接