iPad - 在专注于输入字段时放大方向变化

Posted 2023-03-12

【中文标题】iPad - 在专注于输入字段时放大方向变化

【英文标题】：iPad - Zooms in on orientation change while focused on input field

【发布时间】：2014-03-04 23:09:39

【问题描述】：

这与Focus on input field and orientation change messes up zoom level on ios 6 Safari 的问题类似，但链接适用于应用程序，而不是网站。

我有以下元标记（请注意，缩放是故意禁用的 - 不是我的电话，客户的要求：D）

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0">

在禁用缩放并将最大缩放设置为 1.0 的情况下，当您浏览网站时，方向更改可以正常工作。然而，当你专注于输入并改变方向时，它开始在页面上添加一些奇怪的东西。

从以下位置更改时： 纵向到横向 - iPad 在页面底部添加了一些黑色块。 横向到纵向 - 页面宽度变宽。我使用 mac 检查了元素，添加的任何空间都在 html 之外，甚至在 html 和 body 标记上都显示overflow: hidden;。

同样的问题发生在 google 的登录页面上 - 当不专注于输入字段时，方向更改工作得非常好，但是当您专注于电子邮件或密码字段并更改方向时，iPad 会出于某种原因放大（您必须从纵向聚焦，然后一旦键盘可见，将方向更改为横向，它会放大）。

对 Google 来说幸运的是，用户可以放大和缩小，但对我来说，客户端要求必须禁用缩放。

有人对此问题有任何解决方法吗？

提前致谢！

【参考方案1】：

我发现当页面高度未设置或设置为 100% 时会出现此问题。我只是为页面容器设置了最小高度。