As shown in the picture above, when the user clicks on the input box on the homepage, the keyboard pops up, and sometimes the input box is partially blocked (as shown below)
The current processing method is to execute resize
after the input box gains focus.
$('input').on('focus' , function(){
$(window).resize();
}).on('blur' , function() {
$(window).resize();
});The purpose of this is to reset the window size and reposition the input box that originally floated at the bottom
But the effect is not very good, sometimes it takes effect and sometimes it fails
What method should be used to better handle this problem?
Also, while the keyboard pops up, scrolling the page can also keep the input area fixed at the bottom
The current positioning method of the input box is: position:fixed
Screenshot environment: ios WeChat
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Input box, you can use flex to fix it to the bottom. To fix flex to the bottom, you can check sticky-footer
It is recommended that you use js to calculate and use
window.innerHeighthttp://www.cnblogs.com/cococe...
Try this
The person above is right, you can use flex. Those who advertise use this attribute. I think this can solve your problem
Address: http://www.haorooms.com/post/...
Principle: Don’t use fixed on ios, use absolute instead.
End.