重点放在iOS 6 Safari的input字段和方向变化上

编辑 :我想这个问题在Stackoverflow是有关这个问题。

编辑 :问题只发生在保存到主屏幕不在浏览上下文。

注意 :关于缩放和方向转换的一切都按预期工作,直到任何input元素被聚焦为止。

我有一个Web应用程序,以下元标记为视口设置:

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

一切都很好的方向转换。 但是,只要input字段被聚焦,缩放级别就会混乱。 我已经尝试了几种不同的方法来解决问题,但是卡住了。

这是什么时候input是重点,我们触发一个orientationchangechange:

  1. 从纵向到横向页面缩小,并不填充整个视口。 在这种模式下,如果我们把注意力集中在一个input元素上,它会放大并在横向模式下看起来不错,但是如果我们再次旋转它,就会出现与2相同的问题。

  2. 从横向到纵向页面放大并覆盖视口以上。

我们尝试过的东西:

  1. 视口的元标签设置(初始缩放,最大缩放,最小缩放)
  2. 删除了视口标签
  3. 在JavaScript中处理方向更改,并在orientationchange上dynamic设置新的视口设置
  4. 试图计算比例级别(document.documentElement.clientWidth / window.innerWidth)onorientationchange
  5. 将input字段的字体大小设置为至less16px

我有点卡在这里,我敢肯定,我失去了一些obviuos所以问题是:我如何确保iOS Safari中的缩放级别是与input前焦点相同的后input焦点?

试试这个:

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

这应该会阻止Safari执行令人讨厌的缩放到焦点input的事情。