收藏
评论

关于微信安卓端网页字体适配的通知官方

为了提供给用户更好的阅读体验,微信安卓版 7.0.10 版本起,网页的字体会跟随微信设置里的字体大小更改而变化。

若调整字体变大或变小后,部分未适配网页的排版会出现显示错乱,建议未进行适配的开发者尽快完成对“ 字体大小” 的适配。


查看网页在字体不同大小下展示效果的方法:

   方法1:"设置">"通用">“字体大小">进行字体大小修改后查看对应网页显示效果。

   方法2:在微信内访问对应网页右上角”…">底部菜单栏选择调整字体">进行字体大小修改后查看对应网页显示效果。

   另外,对于现有的显示问题,我们提供以下方案让开发者临时将字体还原标准大小。同时,开发者可以在页面中提示用户在右上角”…”更多菜单中修改字体到合适的大小。


下列方案可以将字体还原标准大小,但我们仍然建议后续做字体适配来提高用户的阅读体验。  『字体还原标准大小』方案:

     我们提供了一个  JSAPI 用于设置字体大小,只需将字体大小等级设置为 2 (标准)即可,代码示例如下:

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


此外,若页面是用 rem 单位进行排版的(目前该做法更容易导致页面不可用),可以反向重置 font-size 的数值达到还原字体标准大小的目的,此方法在效果上也比较理想。代码示例如下:

// 以下代码思路来源网络。同时代码放在 body 标签开头位置效果最佳
var $dom = document.createElement('div');
$dom.style = 'font-size: 10px';
document.body.appendChild($dom);

// 计算出放大后的字体
var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
document.body.appendChild($dom);

// 计算原字体和放大后字体的比例
var scaleFactor = 10 / scaledFontSize;

// 取 html 元素的字体大小
var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));

// 由于设置 font-size 后实际会变大,故 font-size 需设置为更小一级
document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
122641浏览
最后一次编辑于  2020-01-14
知识库内容非实时更新,可能已过期、失效或不适用于当前情形,请谨慎参考
收藏
反馈

39 个评论

  • 丁丽君
    丁丽君
    2020-01-07
    耦慮
    2020-01-07
    赞同
    回复
  • Byron Mann
    Byron Mann
    2020-01-04

    额密密麻麻密密麻麻密密麻麻密密麻麻密密麻麻密密麻麻密密麻麻密密麻麻面膜

    2020-01-04
    赞同
    回复
  • 老鹰
    老鹰
    2020-01-04
    在vue spa项目中,使用rem做适配的项目。app.在vue的creat中添加
    document.addEventListener("WeixinJSBridgeReady", function () {
      WeixinJSBridge.invoke("setFontSizeCallback", {
        fontSize: '2'
      });
    }, false);
    发现进入别的页面路由就无效了。。然后用第二个方案好像也不是很好使,有什么好的处理方式吗,具体是要加在哪里。加在设置完根节点fontsize后再处理好像也有点问题。。。
    


    2020-01-04
    赞同
    回复 1
    • micheal
      micheal
      2020-01-06
      app.vue 里面 mounted 里面执行即可
      2020-01-06
      回复
  • 貌似祸害
    貌似祸害
    2020-01-03

    这两套方案择其一即可咯?

    2020-01-03
    赞同
    回复
  • 2020-01-03

    为啥把我的emmmmmmmmmmmmm删掉了?


    2020-01-03
    赞同
    回复
  • 赵有猫
    赵有猫
    2020-01-03

    虽然不知道你们在emmmmmm些什么,我看完以后我也想emmmmmmmmmmmmmmmmmmmmm

    2020-01-03
    赞同
    回复
  • 你的现充男友已到账
    你的现充男友已到账
    2020-01-03

    意思是说还是不支持大字体对吗?

    2020-01-03
    赞同
    回复 3
    • 简单life
      简单life
      2020-01-03
      不知道我理解的对不对,意思是如果你不想改变原有的显示效果,需要用微信这边新提供的代码控制页面的字体大小,否则页面会因为用户的微信客户端的字体大小变化而变化


      简单点说就是要加工作量
      2020-01-03
      回复
    • 星迴拾捌
      星迴拾捌
      2020-01-03
      是的所以都在emmm
      2020-01-03
      回复
    • momo
      momo
      2020-01-03
      就是恶心就完事了
      2020-01-03
      回复
  • 藤井树
    藤井树
    2020-01-03

    呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿 ,没开关码

    2020-01-03
    赞同
    回复
  • Vision_X
    Vision_X
    2020-01-03

    23333333333333333333


    2020-01-03
    赞同
    回复 2
    • Run²⁰²²
      Run²⁰²²
      2021-01-14
      小伙子 哪儿的
      2021-01-14
      回复
    • M小
      M小
      2021-03-19回复Run²⁰²²
      小伙子 哪儿的
      2021-03-19
      回复

正在加载...

登录 后发表内容