The layout is affected when the mobile keyboard pops up.

The layout is affected when the mobile keyboard pops up.

The layout is affected when the mobile keyboard pops up.

1) the height of the mobile page that was created some time ago is only one page, so height: 100%; width: 100% is used;

When the keyboard is displayed in the input box of ios, the layout is not significantly affected.

When the input box may be pressed by a soft keyboard, some Android devices may encounter problems. Huawei's browser and UC may cause layout problems.

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

Solution:

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

After the page is loaded, js sets a height for the body.

 

2) I have also encountered that when I click the input box on the mobile terminal, the page is shifted to the left, but it has been too long. I forgot some browsers and I cannot reproduce them, the solution is to center the size of the input box.

 

PS: Huawei's browser and UC do not recognize the new css3 units, such as vw and Vl.