Problem Description: When you pull up the keyboard Andrews, will squeeze page H5, the page layout reduce distortion;
iOS After pulling up the keyboard, underneath there is a blank; (no pictures example, if you forgot even if the bar)
Andrews:
Android keyboard pull up the page height will account for a similar percentage of the layout, then the page will be compressed, resulting in deformation of serious, can be used when the page height changes, the following content to hide or display
. 1 function the Android () { 2 // Andrews keyboard adapted bounce page compression . 3 const U = the navigator.userAgent; . 4 the let = that the this ; . 5 IF (u.indexOf ( "the Android")> -1 || u.indexOf ( "the Linux")> -1 ) { . 6 // Andrews phone 7 // get the view of the original height . 8 the let screenHeight = document.body.offsetHeight; . 9 // is a window resize event bindings 10 window.onresize = function () { . 11 the let nowHeight = document.body.offsetHeight; 12 is if (nowHeight < screenHeight) { 13 that.display = "display: none"; 14 } else { 15 that.display = ""; 16 } 17 }; 18 } 19 }
iOS:
iOS blank page because after the keyboard pops up stranded (personal understanding), iOS have an elastic stretch, on the blank (I think I have not changed, in fact, I secretly taller)
. 1 function scrollTop () { // keyboard is pulled away after the initial position, let a page 2 window.scroll (0, 0 ); . 3 }
Above, and the other: H5 is a full page
PS: a lot of strange compatible can be another way, as long as the user has little impact on the use, compatible can tamper with the concept.