android使用window.resize
苹果软键盘时候，window.resize不起作用
https://blog.csdn.net/u012982629/article/details/81905894
还一个方法，就是使用媒体查询@media，但是局限性很大
@media (max-height: 400px) {
.footer {
display: none;
}
}<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>h5软键盘兼容性</title> </head> <body> <style> *{ box-sizing: border-box; } body,html,div{ margin:0;padding:0; } .head{ margin:1rem; } .footer{ padding:1rem; position: fixed; left:0; width:100%; bottom:0; } .button{ height:2rem; border-radius: .3rem; background: blue; color:#fff; text-align: center; line-height: 2rem; } </style> <div class="head"> <input type="text" value="" placeholder="测试"> </div> <div class="footer"> <div class="button">确定</div> </div> <script src="./js/jquery.min.js"></script> <script> $(function(){ //android var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight; window.onresize=function(){ var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight; if(resizeHeight-0<originalHeight-30){ //软键盘弹出 $(".footer").hide(); }else{ //软键盘收起 $(".footer").show(); } } //ios if(isIphone()){ document.body.addEventListener('focusin', function(){ //软键盘弹出 $(".footer").hide(); }) document.body.addEventListener('focusout', function(){ //软键盘收起 $(".footer").show(); }) } }) function isIphone(){ var u = navigator.userAgent; var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return isiOS; } //说明：详见博客 //https://blog.csdn.net/u012982629/article/details/81905894 /*function isAndroid(){ var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 return isAndroid; }*/ </script> </body> </html>