Solução de adaptação de fontes da web

A partir da versão 7.0.10 do WeChat Android, o tamanho da fonte das páginas da web seguirá o tamanho da fonte nas configurações globais do WeChat. Se o usuário definir uma fonte maior, poderá causar confusão no layout da página Web. É recomendado que os desenvolvedores se adaptem para fontes maiores.

document.addEventListener("WeixinJSBridgeReady", function () {
  WeixinJSBridge.invoke("setFontSizeCallback", {
    fontSize: '2'
  });
}, false);

Além disso, se a página for composta em unidades rem (atualmente, é mais provável que esse método torne a página inutilizável), o valor do tamanho da fonte pode ser redefinido inversamente para restaurar o tamanho da fonte padrão. O exemplo de código é o seguinte:

// 以下代码思路来源网络。同时尽量将代码放在 body 标签开头位置
var $dom = document.createElement('div');
$dom.style = 'font-size: 10px;';
document.body.appendChild($dom;
// 计算出放大后的字体
var scaledFontSize = parseInt(windowgetComputedStyle($dom, null.getPropertyValue('fontsize'));
document.body.removeChild($dom;
// 计算原字体和放大后字体的比例
var scaleFactor = 10 / scaledFontSize;
// 取 html 元素的字体大小
var originRootFontSize = parseInt(windowgetComputedStyledocumentdocumentElement, null.getPropertyValue('fontsize'));
// 由于设置 font-size 后实际会变大,故 font-size 需设置为更小一级

dcument.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';

Reimpresso de: Solução de adaptação de fontes da Web: Solução de adaptação de fontes da Web

Supongo que te gusta

Origin blog.csdn.net/weixin_42215897/article/details/103820591
Recomendado
Clasificación