当文本域聚焦时，视口水平移动

Question

当文本字段集中在我的Sencha Touch App

时，这就是我遇到的问题

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

这就是它应该看起来的样子

有没有人有同样的问题并解决了它？

更新

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

有时也会在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 />的{​​{1}}样式设置为至少 16像素。

font-size

这个更紧凑的<input type="text" style="font-size: 16px;" /> 标记只是说页面应最初以<meta />比例显示。

---

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

初始页面显示：

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

Answer 2

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

要解决此问题，我只需在发送应用请求后隐藏Facebook <div>，并在需要时立即显示。

Answer 3

尝试在父元素上设置min-width