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

Posted 2023-03-12

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

【英文标题】：Focus on input field and orientation change messes up zoom level on iOS 6 Safari

【发布时间】：2013-05-23 07:35:55

【问题描述】：

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

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

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

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

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

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

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

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

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

我们尝试过的事情：

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

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

【参考方案1】：

试试这个：

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

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

【讨论】：

感谢您的输入，但它在 Safari（和 Chrome）中运行良好，并且仅当 Web 在 iOS 应用程序内的 WebView 中使用时才会出现问题，我们已将 Web 排除为一个问题，并通过在应用程序中处理它来修复它（在我可以分享之前，需要询问应用程序的人他是如何修复它的）

PS 如果您专注于输入并更改方向，该网站将以 maximum-scale=1.0 中断