移动端页面字体在微信被放大，导致排版错乱

图月志 2018-05-18

在开发微信页面的时候，之前一直没有测出这个问题。直到某天领导的手机出现了排版错位的问题，拿着手机质问我的工作态度。
Google了一下发现原来微信调整了字体大小会放大网页的字体，导致排版混乱。通过设置可以禁止网页字体被放大：

<body style="-webkit-text-size-adjust: 100%!important;">
    @RenderBody()
     <script type="text/javascript">
        (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>     

</body>

@RenderBody()请忽略

这样网页就没问题了，至少目前看来。

参考文章 《禁用微信 webview 调整字体大小》

The end... Last updated by: Jehorn, May 18, 2018, 04:12 PM

图月志

图月志

相关推荐

微信支付WeixinJSBridge.invoke 安卓无反应，ios调用却可以

最后如果没有特殊要求建议使用JSSDK方式调用微信的接口，这种方式现在估计不维护了，也不稳定，坑太多，不适合入坑。

csdnuuu / 0评论 2019-12-20

Vue开发Html5微信公众号的步骤

在微信浏览器里面打开H5网页中执行JS调起支付，WeixinJSBridge内置对象在其他浏览器中无效。web签名使用 jsignature 实现，由于jsignature 基于Jquery实现，需要引入Jquery。签名完成后，使用 html2canva

HTML中国 / 0评论 2019-04-11

Vue 开发H5 微信公众号

}二、实现Web签名+截图网页+上传截图web签名使用 jsignature 实现，由于jsignature 基于Jquery实现，需要引入Jquery。签名完成后，使用 html2can

badroot / 0评论 2019-07-01

分享集合js

"img_url":imgUrl,//"img_width":"640",//"img_height":"640","link":lin

quiyo / 0评论 2014-11-17

weixin微信开发，分享 参数设置

var descContent = '“中国测试云”平台上线啦，想优先体验如何在云端进行测试，快速戳进！* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。*

wsjb00 / 0评论 2014-08-29

微信分享到朋友圈的脚本奥秘

即微信的内置浏览器的user-agent信息中含有MicroMessenger。微信最近推出的一个社交工具网站www.faxinxi.la，能发投票、活动、文章。查看faxinxi里唯一js文件，你会发现一个WeixinJSBridge的输出对象，再对比下

pureChilder / 0评论 2014-03-26

深究WeixinJSBridge未定义之因

Fundebug并没有使用微信JS-SDK，然而却收到了WeixinJSBridge is not defined的报错：。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。微信内置浏览器会有WeixinJSBridge，但是需

moldy0 / 0评论 2019-06-21

JS实现微信里判断页面是否被分享成功的方法

本文实例讲述了JS实现微信里判断页面是否被分享成功的方法。分享给大家供大家参考，具体如下：。}更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《Ja

jiegeng / 0评论 2017-06-06

React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能

* Created by wuyakun on 2017/5/23.*/let wxUtils = {};openOptionMenu();disabledOptionMenu();};onBridgeReady(true);onBridgeReady(f

zzzerttt / 0评论 2017-05-26

js实现移动端微信页面禁止字体放大

由于微信自带字体放大功能，因此基于微信的页面都可以通过微信进行字体放大，但是有些情况下这并不是我们想要的，因为很多移动端页面的开发都是使用rem作为单位的，当使用微信进行字体放大是，会导致页面的整体布局乱掉的情况出现，这对用户体验来说是极其不友好的，我们希

MouseWang / 0评论 2017-02-16

基于js实现微信发送好友如何分享到朋友圈、微博

微信浏览器内置了javascript私有对象WeixinJSBridge，可以实现发送给朋友、分享到朋友圈、分享到微博等功能。var imgUrl = "图片地址";var lineLink = "当前网址";

古人云小程序 / 0评论 2019-04-29

微信小程序架构分析 (上)

相信不少上手试用了微信小程序开发者工具的开发者都会对其实现有些疑惑， 本文试图对其架构模型进行一些解析。如有错误之处，欢迎留言指出。微信开发者工具默认禁用了右键打开调试面板功能，我们可以修改开发者工具部分代码移除该限制。service 模块负责应用的后台逻

maweiwei / 0评论 2017-06-09

浅析"WeixinJSBridge is not defined"

Fundebug并没有使用微信 JS-SDK，然而却收到了WeixinJSBridge is not defined的报错：。由此可见，这是一个非常普遍的问题。微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。未使用微信 J

fundebug / 0评论 2019-03-29

Thinkphp微信公众号支付接口

第一步 先把文件夹的那两个图片 配置成一样的路径 除了域名要改 其他保持一致。第二步 把 Weixinpay 这个文件夹放在 \ThinkPHP\Library\Vendor 将Weixinpay文件夹放置到这个Vendor文件夹中。<button

PHP100 / 0评论 2019-03-28

微信WeixinJSBridge API（屏蔽右上角按钮等）

WeixinJSBridge这个API也并不是所有功能都被和谐掉了，相反，有好几个功能还是相当有用的，可以正常使用，比如：。network_type:wifi wifi网络 2 network_type:edge 非wifi,包含3G/2G 3 netwo

编程爱好者联盟 / 0评论 2016-10-17