微信浏览器或手机浏览器字体大小调整 导致H5页面布局错乱解决方案
发表于:2021-11-11 14:49:09浏览:2429次
手机在系统设置和微信设置的通用设置中都提供放大字体功能,这两种设置都可以系统中字体和应用中字体的大小。此外在微信浏览器和其他一些浏览器中还提供手动设置浏览器字体大小,开发过程中发现一个问题,一旦用户设置放大字体之后,会导致页面的字号变大,从而导致公众号内开发的H5页面布局错乱,解决方案如下:
1、iOS的解决方案:
在iOS系统中调整浏览器字体的字体大小是通过给body设置-webkit-text-size-adjust属性实现的,所以可以通过用优先级覆盖这个属性来禁止调整字体大小。
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; }
2、安卓系统的解决方案:
安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小,并且重写设置字体大小的方法,让用户不能在该网页下设置字体大小。
<script> (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 }); }); } })(); </script>
不过,安卓的这个方法有个缺陷,页面先看到的是字体被放大的效果,然后闪回到正常的展示,估计1s,因为WeixinJSBridge初始化需要一点时间,要等到WeixinJSBridge初始化后才可以调用其的方法设置字体到默认大小。如果页面有loading的话,就不看不出来了。
推荐文章
- CSS 选择器::is(), :where(), 和:has()伪元素的运用
- 使用HTML Purifier在thinkphp6中过滤富文本&防止XSS攻击
- ThinkPHP发布安全更新版本(V6.1.0/V6.0.14),移除对think-filesystem库的依赖
- Windows Terminal Preview 1.15 发布
- PHP实现工作年限自动计算,工作0-6个月的算0.5年,7-12个月的算1年
- 编程界首部小说版教程—JavaScript百炼成仙
- javascript的遍历方法forEach和map的区别
- PHP合并数组的4种常见方法
- PHP快速查找value所在数组的索引值
- 企业OA系统开发一般需要多久?开发费用怎样?