标签：function uniapp 字体大小 微信 App H5 handleFontSize 兼容性问题 WeixinJSBridge

uniapp H5打包发布后在部分手机字体无故变大，导致页面错乱，字体都是使用upx(rpx)单位的(这个不是问题原因)，在电脑的浏览器和微信开发者工具上各种机型测试页面都是正常的。

最后使用多个手机型号测试后，发现这个与手机型号无关，与微信设置的字体大小有关系。字体无故变大，导致页面错乱的手机都是把微信字体设置了非标准大小字体的手机。

查看微信字体大小：打开微信 → 我 → 设置 → 通用 → 字体大小

解决方法：

在App.vue的<script></script>代码修改成一下代码(安卓手机)

<script>
	// #ifdef H5
	(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
	    });
	   });
	  }
	 })();
	// #endif
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

在App.vue的<style></style>代码修改成一下代码(苹果手机)

	/* #ifdef H5 */
	body { /* IOS禁止微信调整字体大小 */
	            -webkit-text-size-adjust: 100% !important;
	            text-size-adjust: 100% !important;
	            -moz-text-size-adjust: 100% !important;
	}
	/* #endif */

标签：function,uniapp,字体大小,微信,App,H5,handleFontSize,兼容性问题,WeixinJSBridge
来源： https://www.cnblogs.com/Intellectualscholar/p/15907307.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。