iPhone 键盘缩小了 Web 应用程序的模态大小

Question

我有一个网站上有一个模态框，当点击一个div时，模态框会弹出。模态框里面有一个输入框。在移动设备上浏览站点时，当我点击输入框时，iPhone键盘会弹出。模态框似乎保持相同的大小，但如果我关闭iPhone键盘，模态框会缩小到屏幕大小减去键盘大小。

- maudulus

---

你是否正在使用固定位置和/或Bootstrap？如果是，请查看这里和这里。 - IMI

使用固定位置...我正在检查是否将其更改为绝对位置会起作用...祈祷成功。 - maudulus

@IMI 目前绝对定位似乎可以工作，但是当我在覆盖层上向上拖动时，它会暴露出下面的所有内容。 - maudulus

你能提供一个代码示例以重新创建你的新问题吗？ - IMI

@IMI 实际上，无论是“position fixed”还是“position absolute”，都会发生与之前相同的事情。 - maudulus

你能提供一个代码示例来重现这个问题吗？ - IMI

Answer 1

似乎iOS存在一个错误，无法正确呈现使用虚拟键盘时的position:fixed;元素。 您应该尝试将您的模态框更改为使用position:absolute;，看看是否可以解决此问题。

您还可以尝试在此处使用用户代理嗅探方法。

- IMI

Answer 2

没有看到代码很难说，但也许你需要添加viewport meta标签？

如果还没有这样做，请尝试：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

- Ibanez