版本：
     taro => 3.6.7
     react => ^18.1.0
     react-dom => ^18.1.0

1. vConsole 工具

vConsole是腾讯开发的用于H5的调试工具，类似于小程序的调试模式

使用方法：

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  new window.VConsole();
</script>

直接在index.html 页面引用，项目刷新就可。

2. H5中获取设备信息方法，适配各种机型及PC方法

/** 获取使用设备 */
export function getDevice() {
    // console.log(navigator.userAgent);
    const ua = navigator.userAgent
    const isWindowsPhone = /(?:Windows Phone)/.test(ua)
    const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone
    const isAndroid = /(?:Android)/.test(ua)
    const isFireFox = /(?:Firefox)/.test(ua)
    const isChrome = /(?:Chrome|CriOS)/.test(ua)
    const isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua))
    const isPhone = /(?:iPhone)/.test(ua) && !isTablet
    const isPc = !isPhone && !isAndroid && !isSymbian
    return {
        isTablet,
        isPhone,
        isAndroid,
        isPc
    }
}

const body = document.getElementsByTagName('body')
console.log(body)
if (os().isAndroid || os().isPhone) {
    console.log('手机')
} else if (os().isTablet) {
    console.log('平板')
} else if (os().isPc) {
    console.log('电脑')
    body.style.setProperty('max-width', '400px')
}

3. 软键盘回弹后'页面上移'或'导致空白'问题？

键盘唤起后导致body高度拉长，页面底部空白和整体上移。软键盘关闭后页面回弹不完整出现遮挡或者软键盘页面不回弹导致空白

3-1. 页面上移遮挡

解决方法：

a. 在唤起软键盘之前，记录当前页面滚动位置（方便后面恢复位置）；

/* 获取窗口滚动条高度 */
function getScrollTop(){  
    let scrollTop=0;  
    if(document.documentElement&&document.documentElement.scrollTop){  
        scrollTop=document.documentElement.scrollTop;  
    }else if(document.body){  
        scrollTop=document.body.scrollTop;  
    }  
    return scrollTop;  
};

const oldScrollTop = getScrollTop() || 0; // 记录当前滚动位置

b.在软键盘关闭后，再将页面归位

document.body.addEventListener('focusin', () => {  //软键盘弹起事件
    console.log("键盘弹起");
    //document.title = "键盘弹起" + $(".weui-dialog").css("position") + CBJS.getScrollTop() + $(".weui-dialog").css("top");
});
document.body.addEventListener('focusout', () => { //软键盘关闭事件
    console.log("键盘收起");
    //document.title = "键盘收起" + $(".weui-dialog").css("position") + CBJS.getScrollTop() + $(".weui-dialog").css("top");

    var ua = window.navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0) { //键盘收起页面空白问题
        document.body.scrollTop = oldScrollTop;
        document.documentElement.scrollTop = oldScrollTop;
    }

});

原文引自网络：www.cnblogs.com/xiongzaiqir…

3-2. 底部空白

解决方法：

// taro.js 方法获取可使用高度同window.innerHeight
const { windowHeight } = Taro.getWindowInfo() 
const [pageHeight, setPageHeight] = useState(windowHeight) // 内容高度

// 记录原有的视口高度
const originalHeight = document.body.clientHeight || document.documentElement.clientHeight

useEffect(() => {
    // 软键盘关闭事件
    document.body.addEventListener('focusout', () => {
        const ua = window.navigator.userAgent
        // 目前发现只有安卓浏览器出现这个问题
        if (ua.indexOf('Android') > 0) {
            const htmlDom = document.getElementsByTagName('html')[0]
            const bodyDom = document.getElementsByTagName('body')[0]
            htmlDom.style.maxWidth = originalHeight + 'px'
            bodyDom.style.maxWidth = originalHeight + 'px'
            setPageHeight(originalHeight) // 这里是给原内容从新设置高度  
        }
    })
},[])