vue h5 在安卓手机端input获得焦点后软键盘弹出顶起页面和fixed问题

最新推荐文章于 2024-06-20 10:18:00 发布

在知识的海洋里遨游01

最新推荐文章于 2024-06-20 10:18:00 发布

阅读量916

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40783321/article/details/127671006

版权

https://blog.csdn.net/weixin_43743175/article/details/124960173

mounted() {
this.$nextTick(_ => {
let realHeight =window.innerWidth > window.innerHeight ? window.innerWidth :
window.innerHeight
this.setMetaHeight(realHeight)
})
},
————————————————
methods: {

// 设置meta高度解决安卓浏览器软键盘弹起，占用窗口的面积问题
setMetaHeight(height) {
document.head.querySelector(“meta[name=‘viewport’]”).setAttribute(‘id’, ‘viewportMeta’)
let metaEl = document.querySelector(‘#viewportMeta’)
let content = ‘height=’ + height + ‘,width=device-width,initial-scale=1.0,user-
scalable=no’
metaEl.setAttribute(‘name’, ‘viewport’)
metaEl.setAttribute(‘content’, content)
this.$forceUpdate()
}
}
————————————————