在微信浏览器字体被调大导致页面错乱的解决办法

iOS的解决方案是覆盖掉微信的样式：

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

安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小，并且重写设置字体大小的方法，让用户不能在该网页下设置字体大小：

　　　　　(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 });});}})();

(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 });});
}
})();

完

转载于:https://www.cnblogs.com/zishan/p/9184094.html

在微信浏览器字体被调大导致页面错乱的解决办法相关推荐

在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字体调大导致页面错乱
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年 ** 正文: ** 在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字 ...
使用onmouseover 与onmouseout导致页面闪动的解决办法
使用onmouseover 与onmouseout导致页面闪动的解决办法问题描述: 解决办法: 问题出现的原因: 问题描述: 在Node节点上使用onmouseover 与onmouseout事件监 ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
google浏览器字体模糊问题（类似分辨率问题）解决办法
1.背景本人刚刚更新了win10几点几,反正最近的一次更新,将登陆和开始做了较好的更新,比较喜欢.但是常用的google浏览器打开时发现分辨率好像不对,但是其他浏览器都是对的,包括电脑,check后 ...
微信浏览器input关闭键盘后导致页面底部空缺问题
移动端页面中有一个input框,点击时弹出软键盘,关闭时页面底部空白出一部分,然后滑动一下又恢复原状了. 解决方案: 绑定一个blur事件,当其触发时,使scrollTo为0 <input ty ...
ueditor上传图片尺寸过大导致显示难看的解决办法
昨天遇到这个问题,我也是折腾成了狗, 到处查,最后收集到三个办法,记录一下. 代码贴这里,方便复制 img{max-width:100%; /*图片自适应宽度*/ }body{overflow-y:s ...
word转换成excel导致身份证错乱的解决办法
今天被老姐拉着强行给他完成一个事情,就是把word的表格转成excel文件,但是每次转变都是身份证乱码,很是奇怪,网上找了很多,没说到点上, 后来找到了解决办法,如下: 步骤1:新建Excel空白文档 ...
禁用微信浏览器字体调整的方法
一.问题场景使用rem适配移动端时,微信浏览器可以调整页面根元素字体大小,导致布局错乱. 解决办法:禁用微信浏览器字体调整. 二.IOS禁止微信调整字体大小 body {-webkit-text-s ...
防止用户调整微信浏览器字体大小导致的显示异常
防止用户调整微信浏览器字体大小导致的显示异常(加JS代码) // 下面这段代码,防止用户调整微信浏览器字体大小导致的显示异常 (function() {if (typeof WeixinJSBridg ...

在微信浏览器字体被调大导致页面错乱的解决办法

在微信浏览器字体被调大导致页面错乱的解决办法相关推荐

最新文章

热门文章