微信浏览器更改字体大小

发表于 | 分类于 |

微信公众号里面的项目，微信浏览器有自带的调整字体，当字体调大之后，页面布局发生变化，导致布局错乱,影响用户体验,解决办法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(function () {
	if (
		typeof WeixinJSBridge == "object" &&
		typeof WeixinJSBridge.invoke == "function"
	) {
		handleFontSize();
	} else {
		if (document.addEventListener) {
			document.addEventListener(
				"WeixinJSBridgeReady",
				handleFontSize,
				false
			);
		} else if (document.attachEvent) {
			document.attachEvent("WeixinJSBridgeReady", handleFontSize);
			document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
		}
	}
	function handleFontSize() {
		// 设置网页字体为默认大小
		WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
		// 重写设置网页字体大小的事件
		WeixinJSBridge.on("menu:setfont", function () {
			WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
		});
	}
})();

上面的代码可使 Android 机页面不再受用户字体缩放强制改变大小，但是会有 1S 左右延时，期间可以考虑 loading 来处理.

[越努力，越幸运！]