文本字段聚焦时视口水平移动

Posted 2023-02-25

【中文标题】文本字段聚焦时视口水平移动

【英文标题】：Viewport shifted horizontally when textfield is focused

【发布时间】：2013-04-19 10:09:52

【问题描述】：

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

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

这就是它应该的样子

有人遇到过同样的问题并解决了吗？

更新

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

有时也会在 android 上发生（Chrome 26）

【问题讨论】：

它到底应该是什么样子？我们只看到一个看起来正确对齐的 TextBox...

我刚刚添加了一个屏幕截图，说明它的外观。相同，但没有水平居中（所以右边没有白边）

您是否将页面上传到我们可以测试的地方？剥离应用程序的其余部分，只留下问题页面:)

@TDeBailleul 顺便试试THIS 方法。这可能会解决您的问题。如果解决了，请告诉我，我将作为答案发布。

您的页面可能已经太宽了，当页面获得焦点时，浏览器只是将焦点集中在设备上。 fb-root div 可能导致它，因为 Facebook 会动态生成内容并将其放入其中，导致页面太宽。

【参考方案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），它将展示您（希望）想要解决的问题。此测试页使用第二种（替代）方法进行更细粒度的控制；你可以看看源代码以供参考。

初始页面显示：

分别有和没有自动缩放：

【讨论】：

Sencha Touch 应用程序已经有元 所以已经没有缩放了。

嗯，我想就是这样......但是，你能在网上放置一个演示相同问题的测试页面吗？

我试过了，但只有当我使用整个时才会出现这个错误，并且我不允许发布它。但我发现了一些东西。我的页面中有一个 ，如果我删除它，那么这个错误就消失了......

好吧，我想这就是我画线的地方=\。不幸的是，我从未使用过 Sencha Touch，我认为这可能是页面缩放问题；对不起。如果还有什么我可以做的，请随时回复。

为您提供帮助，也因为它可能会帮助其他用户。谢谢

【参考方案2】：

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

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

【参考方案3】：

尝试在父元素上设置最小宽度