javascript - 聚焦文本字段时视口(viewport)水平移动

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规模。

---

这是一个 test page (简称:http://bit.ly/15GbxJa)将展示您(希望)想要解决的问题。此测试页使用第二种(备用)方法进行更细粒度的控制；您可以查看源代码以供引用。

初始页面显示:

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