H5页面在安卓设备微信中打开，假如微信调整了字体大小，文字会显示不全？

Question

H5页面在安卓设备微信中打开，假如微信调整了字体大小，文字会显示不全？
当前页面在html中引入了css 其中html 的 font-size设置为13.33vw 页面中其他元素设置的是rem
现在想要的是仅在安卓设备在微信中打开，且在微信设备调整了字体大小时进行限制，应该怎么改呢？现在用的方法，会全部调整成微信默认字体大小?

 if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
            handleFontSize();
        } else {
            if (document.addEventListener) {
                document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
            } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
            }
        }
        function handleFontSize() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
            WeixinJSBridge.on('menu:setfont', function () {
                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
            });
        }
}

Answer 1

换环境做一下字体限制就行

function isAndroid() {
    return /android/i.test(navigator.userAgent);
}
function isWeixin() {
    return /MicroMessenger/i.test(navigator.userAgent);
}

const viewportWidth = window.innerWidth;
const baseFontSize = (viewportWidth * 13.33) / 100;

if (isAndroid() && isWeixin()) {
  
    let originalSize = window.getComputedStyle(document.documentElement).fontSize;
    
    function checkFontSize() {
        const currentSize = window.getComputedStyle(document.documentElement).fontSize;
 
        const currentValue = parseFloat(currentSize);
        const originalValue = parseFloat(originalSize);
        
        if (Math.abs(currentValue - originalValue) > 0.5) { 
            document.documentElement.style.fontSize = baseFontSize + 'px';
            console.log('字体被修改，已重置', {
                original: originalSize,
                current: currentSize,
                reset: baseFontSize + 'px'
            });
        }
    }

    checkFontSize();

    setInterval(checkFontSize, 100);

    function handleFontSize() {
        WeixinJSBridge.on('menu:setfont', function() {
            document.documentElement.style.fontSize = baseFontSize + 'px';
            console.log('微信字体设置被触发，已重置为:', baseFontSize + 'px');
        });
    }

    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }
}


function monitorFontSize() {
    let lastSize = window.getComputedStyle(document.documentElement).fontSize;
    console.log('初始字体大小:', lastSize);

    function check() {
        const currentSize = window.getComputedStyle(document.documentElement).fontSize;
        if (currentSize !== lastSize) {
            console.log('字体大小变化:', {
                from: lastSize,
                to: currentSize
            });
            lastSize = currentSize;
        }
        requestAnimationFrame(check);
    }
    
    requestAnimationFrame(check);
}

// 启动监控
monitorFontSize();

css:

html {
    font-size: 13.33vw;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}

body {
    font-size: 1rem;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}


* {
    max-height: 999999px;
}