安卓大屏手机样式兼容

开发c端页面的时候，安卓大屏手机经常会存在一些兼容性的问题，比如文案重叠，弹窗过大等问题，此时要针对大屏手机单独设置样式，思路就是：1、检测当前是不是大屏手机；2、样式设置。话不多说直接上代码

useEffect(() => {
    if (isAndroid()) {
        window.addEventListener("resize", resizeHandler());
    }
}, [])

const resizeHandler = () => {
    let screenWidth = document.documentElement.clientWidth;
    let screenHeight = document.documentElement.clientHeight;
    let boxContent = content.current;
    if (screenHeight / screenWidth < 1) {
        // 大屏
        if (boxContent) {
            // 设置大屏样式
        }
    } else {
        if (boxContent) {
            // 设置正常手机样式
        }
    }
}

判断是否是大屏手机直接根据屏幕的宽高比来判断就可以了，在电脑上调试的时候可以把Dimensions设置成Responsive，就可以任意变换屏幕的宽高，从而模拟大屏，兼容问题轻松解决～