performance

On Android phones, when you click on the Input box, the keyboard pops up and pops up the page, causing the page style to mess up. When the focus is removed, the keyboard is folded up and the keyboard area is blank without falling back.

The reasons causing

We’re going to have a fixed bottom in our app layout. On some versions of Android, typing in a popup will extract the absolute and fixed elements. Resulting in a smaller viewable area, layout confusion.

Principles and solutions

Soft keyboard will page up the solution, mainly by listening to the page height changes, forced to return to the height before the pop-up. // Record the original viewport height

const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;

window.onresize = function(){
  var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  if(resizeHeight < originalHeight ){ document.body.clientHeight = originalHeight; }}Copy the code

The problem of keyboard not falling back appears in iOS 12+ and wechat 6.7.4+, which is a common Bug in the development of wechat H5.

Compatibility principle, 1. Determine version type 2. Change the scrolling visual area

const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if(! isWechat)return; const wechatVersion = wechatInfo[1]; const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_? (\d+)? /); // If the device type is iOS 12+ or wechat 6.7.4+, restore the original viewportif (+wechatVersion.replace(/\./g, ' ') >= 674 && +version[1] >= 12) {
  window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
} Copy the code

Window.scrollto (x-coord, y-coord), where window.scrollto (0, clientHeight) restores to the original viewportCopy the code