4

编辑：我猜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. 将输入字段字体大小设置为至少 16px

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

4

1 回答 1

0

试试这个：

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

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

于 2013-05-23T16:05:45.817 回答