ios设备显示问题

Posted 2023-03-14

【中文标题】ios设备显示问题

【英文标题】：Display issue in ios devices

【发布时间】：2020-06-30 19:11:49

【问题描述】：

我发现我的网站在 ios 设备中出现问题。但它在除 iphone 之外的所有桌面浏览器和手机上都能正常工作。我花了很多时间来调试这个问题。出现此问题的原因如下。

(a) ios 中的移动浏览器（safari、chrome 等）在将焦点放在文本输入字段时会缩放，这会破坏布局

(b) 一旦失去焦点，它就不会恢复其初始状态

我在没有将任何事件绑定到输入文本的情况下进行了测试。仍然是相同的问题。令人困惑的是，这个问题不会出现在 android 或 windows 手机中。

有人遇到同样的问题吗？解决此问题的最佳方法是什么？

正如@drnugent 在 cmets 中所指出的，当关注 ios 设备的输入字段时，很可能通过浏览器进行缩放，这会破坏布局。是否建议禁用此功能？

编辑：这是一个与 ios 设备在关注输入字段时面临的问题有关的具体问题，据我了解，它不违反任何社区准则。我不知道为什么有人投票支持结束这个问题。

【问题讨论】：

免责声明：我没有投票关闭。但是，他们给出的原因是“需要调试详细信息”如果问题是调试问题并且缺少重现它的必要代码，则应该选择“需要调试详细信息”。 发布一个重现问题的最小 html 页面，你会得到更多的运气 ;) 包括你的页面的 <meta> 标签，我想这在这里非常相关

禁用输入缩放相当简单，这是一种方法：medium.com/cssjunction/…

感谢 blex 的评论

@drnugent，我从不新这个概念。现在我开始了，谢谢

让我知道这是否适合您。

【参考方案1】：

您应该能够使用以下代码禁用视口缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />