h5移动端开发之禁用微信浏览器字体大小设置

h5开发过程中，无论是本地手机调试，还是发给客户预览过程中，经常首先会用微信浏览器打开，有遇到的问题是pc模拟器中正常，但是微信浏览器整个布局都是乱的，其原因是微信浏览器中的字体设置大小。
如下，当字体设置为标准时，正常的页面呈现：

而当字体设置为其它时，页面的布局就乱了：

对此可以针对微信浏览器将字体设置为默认标准并且禁用字体大小调整，代码如下：

(function() {if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {handleFontSize();} else {if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);} else if (document.attachEvent) {//IE浏览器，非W3C规范document.attachEvent("onWeixinJSBridgeReady", handleFontSize);}}
})()
function handleFontSize() {// 设置网页字体为默认大小WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });// 重写设置网页字体大小的事件WeixinJSBridge.on('menu:setfont', function() {WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });})
}

可以看到更改后，无论如何调整微信浏览器的字体，页面都会按照默认标准字体进行呈现：

h5移动端开发之禁用微信浏览器字体大小设置相关推荐

禁用微信浏览器字体调整的方法
一.问题场景使用rem适配移动端时,微信浏览器可以调整页面根元素字体大小,导致布局错乱. 解决办法:禁用微信浏览器字体调整. 二.IOS禁止微信调整字体大小 body {-webkit-text-s ...
防止用户调整微信浏览器字体大小导致的显示异常
防止用户调整微信浏览器字体大小导致的显示异常(加JS代码) // 下面这段代码,防止用户调整微信浏览器字体大小导致的显示异常 (function() {if (typeof WeixinJSBridg ...
怎么调大计算机浏览器内字体,W7系统浏览器字体大小设置的方法
在平时的工作中,我们常常会使用浏览器查看网页,可是每个用户对于网页字体小大的要求都是不一样的,所以这时候就可以设置一下,那么浏览器字体大小怎么设置呢?其实很简单,下面就由小编教大家w7系统浏览器字体大 ...
html火狐定义字体大小,火狐浏览器字体大小设置方法
火狐浏览器字体大小设置方法,火狐浏览器字体太小的话,看小说.看八卦.看杂志.看军事新闻.看今日头条都很不方便,对眼睛也不好,怎么让Firefox浏览器字体设置大一些呢?下面小编就为大家分享一下吧. 火 ...
浏览器字体大小设置_CSS之浏览器解析样式的过程
阅读本文约需要10分钟大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务! 1.长期为你提供最优质的学习资源! 2.给你解决技术问题! 3.每天在朋友圈里分 ...
浏览器字体大小设置_全新内核 Edge 浏览器来了，这回或许能成为你的真 · 默认浏览器...
1 月 16 日,此前测试已久的 Chromium 内核 Edge 浏览器稳定版本终于如期上线,至此微软的 Edge 浏览器已经基本完成了从 EdgeHTML 排版引擎到 Blink(Chromium ...
浏览器字体大小设置_max浏览器app-max浏览器安卓版
max浏览器app是一款非常好用的手机浏览器软件,可以为您快速找到更多信息和内容,快速输入关键字,然后您可以找到相关内容,您也可以输入URL来立即进入网页,显示清晰的资源,max浏览器安卓版可以一键设 ...
SQLyog数据库列表(对象浏览器)字体大小设置方法，不是普通字体大小设置
没有设置数据库列表(对象浏览器)字体大小的时候,默认太小了看着太累了,找了一些文章,还是没找到如何设置,自己找了一会,终于找到了现在设置之后的效果舒服了很多. 设置步骤 1.点击导航栏中的工具,再单 ...
h5移动端判断是否是微信浏览器
js: function isWeiXin() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessen ...
java开发，IDE，eclipse字体大小设置
一.打开eclipse. 二."Window"菜单列表,"Preferences". 三.找到"General"下的"Appear ...

h5移动端开发之禁用微信浏览器字体大小设置

h5移动端开发之禁用微信浏览器字体大小设置相关推荐

最新文章

热门文章