【问题标题】:Display issue in ios devicesios设备显示问题
【发布时间】: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,我从不新这个概念。现在我开始了,谢谢
  • 让我知道这是否适合您。

标签: javascript html css ios


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-04-24
    • 1970-01-01
    • 1970-01-01
    • 2012-09-12
    • 2016-06-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多