Javascript 聚焦textfield时视口水平移动

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

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

应该是这样的

有人已经有同样的问题并解决了吗

更新

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

---

Android上有时也会出现这种情况（Chrome 26）

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

此

标记有助于防止：

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

然后，将每个

的

字体大小

样式至少设置为16像素

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

这个更紧凑的

标签简单地说页面最初应该以

1:1

比例呈现

---

这里有一个（缩写：）将演示您（希望）想要解决的问题。此测试页使用第二种（备用）方法进行更细粒度的控制；您可以查看源代码以供参考

初始页面显示：

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

---

实际上，您需要在index.html中包含Facebook

，这是在应用程序请求期间导致此问题的原因。正如@rdougan所说，它比屏幕大，因此场是水平和垂直居中的

---

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

尝试设置父元素的最小宽度，它的外观应该如何？我们只是看到一个文本框，它看起来是正确对齐的…我刚刚添加了一个屏幕截图，它应该是什么样子的。相同，但没有水平居中（因此没有右边的白色边距），您是否将页面上传到我们可以测试的地方？去掉应用程序的其余部分，只留下问题页面：）@tdebaileul顺便说一句，试试这个方法。这可能会解决你的问题。如果问题解决了，请告诉我，我将作为答案发布。您的页面可能已经太宽，当页面聚焦时，浏览器只是将焦点集中在设备上。fb root div可能是造成这种情况的原因，因为Facebook会动态生成内容并将其放入其中，导致页面太宽。Sencha Touch应用程序已经有了meta，因此已经没有缩放功能。嗯，我猜就是这样……但是，你能在网上放置一个测试页面来演示同样的问题吗？我试过了，但是这个错误只在我使用整个页面时出现，我不允许发布它。但是我发现了一些东西。我在我的页面中有一个，如果我删除它，那么bug就消失了…好吧，我想这就是我画线的地方=\。不幸的是，我从未使用过SenchaTouch，我认为这可能是一个页面缩放问题；我很抱歉。如果还有什么我能做的，请随时回复。给你的帮助，也因为它可能会帮助其他用户的赏金。谢谢

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