专注于输入字段和方向更改会扰乱 iOS 6 Safari 上的缩放级别

Question

编辑：我猜this question on Stackoverflow与这个问题有关。

编辑：该问题仅在保存到主屏幕而非浏览上下文时出现。

注意：在任何输入元素被聚焦之前，有关缩放和方向更改的一切都按预期工作。

我有一个带有以下视口设置元标记的网络应用程序：

<meta name="viewport" content="user-scalable=no, width=1024">

在方向改变上一切都很好。但是，每当输入字段被聚焦时，缩放级别就会混乱。我已经尝试了几种不同的方法来解决问题，但被卡住了。

当输入被聚焦并且我们触发方向改变时会发生这种情况：

1. 从纵向到横向 页面被缩小并且没有填满整个视口。如果我们在这种模式下专注于输入元素，它会缩小并且在横向模式下看起来没问题，但是如果我们再次旋转它，它会遇到与 2 中相同的问题。

2. 从横向到纵向 页面被放大，覆盖的范围超过了视口。

我们尝试过的事情：

1. 视口的元标记设置（初始比例、最大比例、最小比例）
2. 删除了视口标签
3. 在 JavaScript 中处理方向更改并在方向更改时动态设置新的视口设置
4. 试图计算缩放级别（document.documentElement.clientWidth / window.innerWidth）onorientationchange
5. 将输入字段字体大小设置为至少 16 像素

我有点卡在这里，我很确定我遗漏了一些明显的东西，所以问题是： 如何确保 iOS Safari 中的缩放级别与输入前焦点相同？

Answer 1

试试这个：

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

这应该会阻止 Safari 做那种烦人的缩放到焦点输入的事情。