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

不会UI的前端
  • 64

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

回复
阅读 10.6k
6 个回答

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

mmaohq
  • 2
新手上路,请多包涵

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

用vw可以吗?

// 我的根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中也可以用。

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

宣传栏