2022-04-20 记录在IOS微信浏览器内键盘高度问题 键盘上方悬浮问题

ios方法仅在ios13以上系统中生效

1、先判断微信浏览器环境

function getClientType(){
    var userAgent = navigator.userAgent;
    var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
    var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isAndroid){
       return "android";
    }else if(isiOS){
       return "ios";
    }
}  
var platform  = getClientType();

2、visualViewport WebApi新属性(具体语法链接

if(platform == 'ios') {
    var visualViewport = window.visualViewport;
    var initHeight = visualViewport.height; // 初始化窗口高度
                        
    visualViewport.addEventListener('resize', () => {
        var changeHeight = visualViewport.height;   // 改变后的窗口高度
        var keybordHeight = Number(initHeight) - Number(changeHeight);  // 键盘高度
    })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容