最近在写一个简易的移动端发布帖子的功能。
在页面底部有个功能区,用来上传图片之类的。要求是在键盘弹起来的时候会浮在键盘上面。
当时想的这不简单么,直接用个fixed就完事了。但是发现在ios上会有问题。
因为安卓键盘弹起来的时候是直接把整个页面都给缩小了,所以fixed会跟着跑,但是ios并不会这样。
没弹起的时候
键盘弹起之后就被键盘遮住了
弹起的时候
然后在我不懈努力的百度之下,我发现了一篇文章。
这篇文章里面讲到了一个新的API。
MDN的文档地址
VisualViewport可以获取到键盘弹起之后的窗口高度。然后用没弹起的减去现在的就是你定位需要用到的位置啦。
使用之后的效果
但是这个API存在兼容性问题,从IOS13才开始支持。用的是需要注意一下是否有这方面的兼容需求