开发移动端H5的时候，字体该不该随着手机系统字体的调整而变化？

Question

在开发移动端H5的时候，因为测试人员调整了手机系统字体的大小导致h5页面发生错位。在寻求解决方案的时候，大多数人提出让安卓开发同事在webview设置让应用不随系统字体的大小而改变。但是这样合理吗？随手看了手机上几个app，类似支付宝、微信都自带了字体设置功能。。。
如果不这么做，前端开发有什么好的解决方案吗？

Answer 1

我试着设置了浏览器的字体大小，没发现什么问题。发生错位很可能你元素布局不够合理，字体行高不够合理。发大后元素与元素发生了错位，重叠导致的。
移动端页面可以采用rem做单位，优化布局看看

Answer 2

同样的问题，产品也提出页面不随系统字体的大小而改变。。。虽然觉得不合理，但还是这样做了

Answer 3

用vw可以吗？

Answer 4

// 我的根html字体是 font-size:calc(100vw/7.5);
function countFont1(){
    var originRootFontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
    var realSize =  document.documentElement.clientWidth/7.5; // 这里的7.5是我自己，你看着调
    
    console.log("originRootFontSize："+originRootFontSize + "realSize:" + realSize); //  系统字体放大缩小，originRootFontSize 和 realSize相等的话就可以了
    
    if (originRootFontSize === realSize) {
        return;
    }
    // 计算原字体和放大后字体的比例
    var scaleFactor = realSize / originRootFontSize ;

    // 取html元素的字体大小
    // 注意，这个大小也经过缩放了
    // 所以下方计算的时候 *scaledFontSize是原来的html字体大小
    // 再次 *scaledFontSize才是我们要设置的大小
    if (scaleFactor !== 1) {
        document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + originRootFontSize * scaleFactor * scaleFactor  + 'px !important';
    }
}

$(window).resize(function() {
    setTimeout(() =>{ // 我这里是设置延时覆盖原先全局 html 的font-size
        countFont1();
    },0)
});

(function(){
   setTimeout(() =>{  // 我这里是设置延时覆盖原先全局 html 的font-size
    countFont1();
   },0)
})();

我自己用的话亲测可以，react中也可以用。

Answer 5

字体被放大，页面变丑是肯定的。
要兼容的话，一般也只要求页面元素不发生错位就好了。
高度不要定死，用padding撑开。flex布局。文本超长裁剪就好了。

Answer 6

楼上这个挺好的