苹果手机,点击文本框弹起软键盘,h5网页顶部header导航被顶起

最近使用vant和vue开发项目时,发现表单元素过多,点击靠近屏幕尾部的文本框,发现顶部导航栏header被顶起。

话不多说,先扫码体验下这个bug。请用苹果手机,微信扫码。

苹果手机,点击文本框弹起软键盘,h5网页顶部header导航被顶起_第1张图片

一、正常情况下,顶部导航栏固定在顶部

苹果手机,点击文本框弹起软键盘,h5网页顶部header导航被顶起_第2张图片

二、点击文本框,弹起软键盘时,顶部导航栏被顶上去了。

苹果手机,点击文本框弹起软键盘,h5网页顶部header导航被顶起_第3张图片

三、软键盘收回,顶部导航栏又返回到顶部位置

苹果手机,点击文本框弹起软键盘,h5网页顶部header导航被顶起_第4张图片

四、相关代码



大神们,有没有遇到这种问题,希望技术大牛们一起讨论下,如何解决这个问题。

你可能感兴趣的:(html5,vueJS,vant)