微信H5适配 解决微信调整字体大小导致Html5页面混乱

摘要:
最近,我们在开发公众号时遇到了一个问题:iOS和Android加载页面。如果用户调整微信的字体大小,我们的页面将相应地调整字体大小,导致页面混乱,无法适应。所以我希望微信的字体放大功能可以被禁用。一些方法总结如下:原则:防止ios和Android调整字体大小时发生事件。ios添加了css属性,而Android使用微信属性来阻止。

最近开发公众号遇到一个问题:

iOS、Android 加载页面,如果用户调整了微信自带的字体大小,那么我们的页面就会跟随调整字体大小,导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。

找了一些方法总结如下:

原理:阻止ios和安卓调整字体大小时候的事件,ios通过添加css属性,安卓通过微信属性去阻止。

iOS系统禁止微信客户端修改字体大小:

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

Android 则通过js 调整:

<script>
// 强制禁止用户修改微信客户端的字体大小
       (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 });
               });
           }
       })();
</script>

免责声明:文章转载自《微信H5适配 解决微信调整字体大小导致Html5页面混乱》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇SQL Server 自定义函数使用百度地图API实现轨迹回放下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果

今天继续给大家介绍HTML5和jQuery插件结合使用生成的图形特效,这里我继续使用星际争霸2的图片元素给大家介绍一个360度全景预览兵种的特效实现,希望大家喜欢!请大家多多留言! 在线演示在线下载 友情提示:以上演示中图片使用较大,如果加载不流畅,请下载到本地运行。 如果你不清楚什么是360度全景预览或者不明白Reel是什么插件的话,请参考这篇文章:分...

微信支付的几种模式总结

1.微信支付文档 https://pay.weixin.qq.com/wiki/doc/api/index.html 2.唤起微信支付的几种方式 jsapi支付:通过js调起支付 h5支付:在微信意外的手机浏览器调起支付 小程序支付:在小程序中调起支付 还有付款码支付,app支付等 3.支付的几种形式 首先开发主体分为普通商户和服务商 对于普通商户可以使...

用HTML5里的window.postMessage在两个网页间传递数据

说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。 通常情况下,不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议,端口号和主机(也称为“同源策略”)。window.postMessage()提供了一个受控的机制来...

破解微信防盗链&amp;amp;微信公众号文章爬取方案

破解微信图文防盗链:https://www.cnblogs.com/xsxshmily/p/8000043.html 图片解除防盗链:https://blog.csdn.net/show_ljw/article/details/52884773 https://cloud.tencent.com/developer/article/1365220 公众号文...

K米评测

关于K米的案例分析 第一部分 调研,评测 评测 第一次上手体验 首先,很遗憾的表示我没有接触过类似的软件,对于这类软件是一无所知。 接下来说说对他的第一印象吧,第一眼看到它的图标觉得不错,简洁明了,让人一眼就知道这个是K米软件。 然后,打开软件看看吧,跳到的是主页面,KTV点歌,让人顿时明白原来这个是KTV点歌的,只要扫描包厢上面的二维码就可以进行点歌...

iOS开发经验总结(上)

在iOS开发中经常需要使用的或不常用的知识点的总结,几年的收藏和积累(踩过的坑)。 一、 iPhone Size 手机型号 屏幕尺寸 iPhone 4 4s 320 * 480 iPhone 5 5s 320 * 568 iPhone 6 6s 375 * 667 iphone 6 plus 6s plus 414 *...