【NuxtJs】阻止微信内置浏览器的字体缩放的解决方案（vue,h5）

需求场景：产品经理把手机字体调到最大，微信字体也设置最大，然后去测试了小程序和H5移动端页面，发现样式字体乱了，于是找到我。

以下配置：如果是正常vue项目放在【index.html】里。

1. IOS禁止微信调整字体大小

body{ // css
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}

2. Android禁止微信调整字体大小

(方式1).以下代码，放到index.html的script标签里；

(方式2).建立一个adjust-android-size.js文件，在index.html中引入这个js，以下是adjust-android-size.js的内容：

(function () {
	if (typeof WeixinJSBridge == 'object' && typeof window.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() {
		// 设置网页字体为默认大小
		window.WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
		// 重写设置网页字体大小的事件
		window.WeixinJSBridge.on('menu:setfont', function () {
		window.WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
    });
  }
})();

以下配置：如果是Nuxt项目放在【nuxt.config.js】里。

创建：textsizeadjust.js文件

(function () {
	if (typeof WeixinJSBridge == 'object' && typeof window.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() {
		// 设置网页字体为默认大小
		window.WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
		// 重写设置网页字体大小的事件
		window.WeixinJSBridge.on('menu:setfont', function () {
		window.WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
    });
  }
})();

nuxt.config.js

 plugins: [
    {src: '@/plugins/textsizeadjust.js', ssr: true}
  ],