Mobile software disk masking input box problem

First, solve the problem that the soft keyboard affects the layout first:

Soft keyboard Popup will change the height of the viewable area of the browser, Android will trigger the Window.resize event, iOS will not trigger, so if the layout of the page element is based on the size of the window, there will be layout confusion, such as the body of the height:100% and so on,

So you need to execute this code after the page is initialized (the height of the body is fixed so that he doesn't adapt)

　　$(document).ready(function() {

　　　　$( ‘body‘ ).height($( ‘body‘ )[0].clientHeight); 　　});Second, distinguish the input box is obscured by the type of the input box height of the screen is the highest visual area of the page is half, that is, the width of 1/2 mobile phone, so if all the input boxes in the upper part of the page, there is no soft keyboard occlusion input box problem (1), the input box at the bottom of the page and the first input The input box group is positioned to the bottom of the page with absolute positioning.　　　　When the soft keyboard pops up, it automatically pops up all the input boxes (2), the total height of the input frame group is greater than the 1/2 page height. Do focuse monitoring events for each input box or listen directly to the Window.resize event (if you are using a third-party input method, you need to put the following code inside the time function) document.activeelement. scrollIntoView(false); document.activeElement.scrollIntoViewIfNeeded(); 　　　　　　 orfunction Scrollt () {

$ ("Html,body"). Animate ({scrolltop: $ (". Fi_now"). Offset (). Top}, 300);

}

　　　　

Reference URL:

Deep understanding of scrolling scroll:https://www.cnblogs.com/xiaohuochai/p/5831640.html

Mobile software disk masking input box problem