Vue h5 soft keyboard pops up to lift up the page after the input on the Android phone gets the focus and the problem is fixed

The problem description
uses position:fixed layout on the mobile side. When the page contains input and textarea input boxes, or when there is an operation to call up the soft keyboard, the height of the visible window changes under the Android browser, causing the height on the page to be recalculated, and the page is squashed or uploaded Fixed issue with shift or bottom positioning being topped . The browser (safari) under ios does not have this problem.

test question

Click the input box, the input method will pop up, and the input box will be invisible

Before the soft keyboard pops up

 

After the soft keyboard pops up

 

Reason
Under ios, the soft keyboard is stacked on top of the visible window, that is, it does not affect the size of the visible window. But in Android, the soft keyboard is in the window, which occupies the area of ​​the window.

Solution
Theory: Set the height value for the viewport, which can be assigned with window.innerHeight. Reset when rotating

js code

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()
 }
}

 solution two

mounted() {
 this.$nextTick(_ => {
  const realHeight =window.innerWidth > window.innerHeight ? window.innerWidth :             
   window.innerHeight
  const originalHeight = document.documentElement.clientHeight ||document.body.clientHeight
  window.addEventListener('resize', () => {
  //键盘弹起与隐藏都会引起窗口的高度发生变化
  const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
  if (resizeHeight - 0 < originalHeight - 0) {
  //当软键盘弹起，在此处操作
  console.log('进入到软键盘弹起=========')
  this.setMetaHeight(realHeight)
  } else {
  //当软键盘收起，在此处操作
  console.log('进入到软键盘收起=========')
  this.setMetaHeight('100%')
    }
   })
 })
},

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()
 }
}

Attached is the rendering after the solution 

 

Note: After the above modifications, the height will not change as the keyboard pops up. The potential problem is that the bottom content will be covered when the keyboard pops up 

It ends here