微信中可以调整浏览器的字体大小
调整后会造成页面布局混乱

禁止字体缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const WeixinJSBridge = (window as any).WeixinJSBridge
const handleFontSize = (wxJSBridge: any) => {
    // 设置网页字体为默认大小
    wxJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
    // 重写设置网页字体大小的事件
    wxJSBridge.on('menu:setfont', (e: any) => {
      wxJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
    })
  }

  // 如果微信已经准备好，直接调用。
  if (WeixinJSBridge && WeixinJSBridge.invoke) {
    handleFontSize(WeixinJSBridge)
  } else {
    // 未准备好需要监听`WeixinJSBridgeReady`事件
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', () => {
        handleFontSize((window as any).WeixinJSBridge)
      }, false)
    }
  }

实际测试发现，WeixinJSBridgeReady事件触发有点延迟，有可能页面加载完成了后才会触发

问题

  • 页面闪烁

    如果不处理页面显示，只监听微信的WeixinJSBridgeReady事件，在事件触发之前，页面会先展示出来
    事件触发时，再调整字体大小，会造成闪烁的问题。
    如果要解决闪烁的问题，那么在事件触发前就不能展示页面，但是这样会导致主观上的感受是页面加载缓慢。

本文地址： http://gehaiqing.com/2020/01/13/js-weixin-set-fontsize/