4

这是我在 Sencha Touch App 中聚焦文本字段时遇到的问题

在此处输入图像描述

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

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

在此处输入图像描述

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

更新

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

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

4

3 回答 3

1

它实际上是<div>您需要在 index.html 中拥有的 Facebook,在应用程序请求期间导致此问题。就像@rdougan 所说,它比屏幕大,因此该字段水平和垂直居中。

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

于 2013-04-29T22:51:58.560 回答
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 ),它将展示您(希望)想要修复的内容。此测试页使用第二种(替代)方法进行更细粒度的控制;您可以查看源代码以供参考。

初始页面显示:

初始页面显示

分别有和没有自动缩放:

启用自动缩放 禁用自动缩放

于 2013-04-23T18:45:46.067 回答
0

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

于 2016-09-20T02:22:05.110 回答