聚焦文本框时视口水平移动

Question

当文本字段集中在我的Sencha Touch应用程序中时，这就是我遇到的问题

由于某种原因，文本字段似乎在垂直和水平方向居中。

这就是它的外观

是否有人已经遇到过相同的问题并已解决？

更新资料

它不会一直发生，但会发生在最初未水平居中的任何文本字段上。

有时也会在Android上发生（Chrome 26）

Answer 1

我相信您所看到的是（至少从屏幕截图中）输入框上的iOS的Safari自动缩放功能。 当输入框获得输入焦点时，此“ 现象 ”会自动使输入框居中/聚焦。

此<meta />标记有助于防止：

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

上面的<meta />标签实现的功能是：

• 以设备的屏幕宽度渲染页面；
• 将缩放比例设置为1:1 ;
• 并将最大比例固定为1 （基本上不可缩放 ）。

如果您的页面确实针对移动设备进行了优化，则上述解决方案应该可以正常工作。

---

可替换地，如果你想有控制在其上<input />控制发生这种情况，可使用：

<meta name="viewport" content="width=device-width" />

然后，将每个<input />的font-size样式设置为至少 16个像素。

<input type="text" style="font-size: 16px;" />

这个更紧凑的<meta />标签只是说页面最初应该以1:1比例显示。

---

这是一个测试页面 （简称： http : //bit.ly/15GbxJa ），它将演示您（希望）要解决的问题。 该测试页使用第二种（备用）方法进行更细粒度的控制。 您可以看一下源代码以供参考。

初始页面显示：

分别启用和不启用自动缩放：

Answer 2

实际上，您需要在index.html中添加Facebook <div> ，这在应用程序请求期间导致了此问题。 就像@rdougan所说的，它比屏幕大，因此场在水平和垂直方向居中。

为了解决这个问题，我只是在发送应用程序请求后隐藏Facebook <div> ，并在需要时显示它。

Answer 3

尝试在父元素上设置最小宽度