问题描述：最近使用uniapp写了一个h5项目 在多数手机上样式都是正常的，有的手机上却出现了字体放大然后导致整个页面的布局都乱了起来。经过查找才发现是用户自己在浏览器端设置了字体放大！！！

使用微信app

如果在微信浏览器打开该页面，可以使用微信js使得字体放大无效。在启动页面设一个立即执行函数：

(function() {if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {handleFontSize();} else {document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);}function handleFontSize() {// 设置网页字体为默认大小WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});// 设置网页字体大小的事件WeixinJSBridge.on('menu:setfont', function() {WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});});}})();

使用移动端浏览器打开

在这个h5项目中使用的是rpx进行适配，而浏览器字体放大针对的只是字体，每个手机浏览器不同，不能限制用户自己去设置字体放大，只能迂回设置。目前还没找到一个比较聪明的办法，只能先用一个笨办法即：
先使用原生方法去获取用户设置的字体大小，即获取当前字体大小，较之原来最小字体16px放大了多少，在使用scss设置一个全局变量，在每个页面设置字体大小的地方都去乘这个单位量

(function(doc, win) {//      用原生方法获取用户设置的浏览器的字体大小(兼容ie)if (doc.documentElement.currentStyle) {var user_webset_font = doc.documentElement.currentStyle['fontSize'];} else {var user_webset_font = getComputedStyle(doc.documentElement, false)['fontSize'];}//取整后与默认16px的比例系数var xs =16/parseFloat(user_webset_font);win.document.getElementsByTagName('body')[0].style.setProperty('--size', xs);})(document, window);

使用实例：

   .card-top-title {font-size: calc(var(--size) * 30rpx);font-family: PingFang SC;font-weight: 400;}