When the mobile soft keyboard pops up, it affects the layout.

When the mobile soft keyboard pops up, it will affect the layout

1) The mobile page I made some time ago, because the height is only 1 page, I used height:100%;width:100%;

When clicking the input box under iOS to pop up the soft keyboard, the layout has no big impact.

When the input box may be pressed by the soft keyboard, there is a problem in some Android devices. Huawei's own browser and UC will have layout problems.

The reason may be that when the soft keyboard pops up, the height is changed so that height: 100% cannot reach the original height.

Solution:

$(document).ready(function () {
　　$('body').height($('body')[0].clientHeight);
});

After the page is loaded, js gives the body a fixed height.

2) I have encountered it before. When the input box is clicked on the mobile terminal, the page is partially offset to the left. However, it has been too long and I have forgotten the browser and cannot reproduce it. The solution is to center the size of the input box. .

PS: Let’s complain about Huawei’s own browser and UC’s new units that do not recognize css3, vw, vh.