你好,
我注意到 Discourse 以某种方式成功计算出了 iOS 上虚拟键盘的顶部位置。如果你希望将某个元素(比如我现在正在输入的这个输入框)正好定位在虚拟键盘上方,这一点至关重要。
在 Android 浏览器设备上,这并非问题,因为当虚拟键盘显示时,position: fixed 的元素会自动被推至视觉键盘的顶部。
iOS 的变通方案是使用 Visual Viewport API:https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API。唯一的问题是,该 API 不支持 iOS 13 之前的设备。
我在运行 iOS 12.1 的设备上测试了同一个输入框,结果发现 Discourse 竟然在不支持该 API 的 iOS Safari 版本上也实现了预期的行为。
能否有人指点一下,我该如何实现同样的效果?非常感谢您的帮助!
此致,
Wouter Vermeersch
我记得 @sam 曾称之为“黑客的堆山”,不确定你是否真的想涉足那里……
2 个赞
我能想象那是一堆权宜之计的堆砌。这个问题已经让我绞尽脑汁好几天了,所以我非常乐意欣然去攀登这座“山”
..
我之前不得不采用一个相当粗糙的变通方案,以防止移动 Safari 在聚焦输入字段时上拉顶部固定栏。实际上,我觉得这不会比我当时为了达成那个效果而做的更糟糕 
2 个赞
sam
(Sam Saffron)
4
那个糟糕的临时方案是在文本域获得焦点时强行移除页面上的其他元素并隐藏所有内容,然后在文本域失去焦点时再恢复原状。
这种做法非常怪异。很高兴 @pmusaraj 引入了一个更加健壮的解决方案。
5 个赞
pmusaraj
(Penar Musaraj)
5
两种方案的相关代码在此:https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js
不过正如该文件中所述,我们将很快移除针对 iOS 12 的变通方案。iOS 14 已于今年发布,目前仅有约 5% 的设备仍在使用 iOS 12。
4 个赞
感谢分享!
我快速看了一下你的变通方案,看起来你是通过硬编码所有可能键盘尺寸的方式来解决的?
不过,当系统禁用自动建议时,键盘大小会发生变化,你的方案是如何应对这种情况的呢?
我之前不知道使用 iOS 12 的用户比例这么低?你确定只有 5% 的用户仍在使用 iOS 12 或更低版本吗?如果是这样,专注于解决该问题可能有些浪费时间。
我在运行 iOS 2.14 的 iPhone 6 上进行了测试。
当自动建议启用时,该变通方案效果完美;而当自动建议被禁用时,我们仍会留下一个空白……但正如您所指出的,仍停留在 iOS 12 的用户数量非常少……而在自动建议被禁用的情况下,仍停留在 iOS 12 的用户更是少之又少。
因此,您的修复方案是我能想到的最佳方案。感谢分享!
pmusaraj
(Penar Musaraj)
9
我不知道是否有官方数据,但 Mixpanel 的这张图表显示 iOS 12 及更早版本占 7%。
我非常赞同,为 iOS 12 修复此问题并不值得你投入精力。
3 个赞