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

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

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

这是它应该看起来的样子

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

更新

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

有时也会在 Android 上发生(Chrome 26)

最佳答案

我相信您所看到的是(至少从屏幕截图中)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 )，它将展示您(希望)想要修复的内容。此测试页使用第二种(替代)方法进行更细粒度的控制；您可以查看源代码以供引用。

初始页面显示:



分别有和没有自动缩放:

关于javascript - 聚焦文本字段时视口(viewport)水平移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16102223/