微信里打开官网和浏览器不一样？差在渲染、字体和分享这几处

客户发来一张截图，说网站坏了

上周三下午，一个做实验室家具的客户在微信里发来截图：首页标题叠在轮播图上，底部的电话号码跑到屏幕外面。他问是不是我们动了模板。

我让他把同一个网址复制到手机自带浏览器里再打开一次。十分钟后他回消息，说浏览器里是好的。

这种事一个月要遇上三四次。网站没坏，是微信里那个浏览器跟你想的不是同一个。而客户的判断依据只有一张截图，他不关心内核，只关心「你们做的站打不开」。

微信里的浏览器，跟手机上那个不是一回事

安卓微信跑的是腾讯自己的 XWEB 内核，iOS 上走系统的 WKWebView。同一段 CSS，两边的解释结果会有出入，旧机型上更明显。

外面还套着一层壳。企业微信、QQ、钉钉里点开同一个链接，又是另外几套渲染环境。你在 Chrome 开发者工具里把宽度拉到 375，看到的是理想状态，不是客户手机里的状态。

所以内部有条不成文的规矩：手机端的东西，没在真机微信里点开过，不算做完。这条是吃过亏之后立的，不是写在流程文档里的漂亮话。

还有一处常被忽略的差异——微信里打开网页，顶部会占掉一条状态栏和导航栏的高度。用 100vh 做满屏的页面，在部分机型上底部会多出一截滚动，因为那个 vh 算的是整个视口。

先分清是排版乱了，还是字被放大了

这两种现象在截图里长得几乎一样，原因完全不同，处理方向也相反。方向搞错，改一天也改不好。

三种情况对着看

• 文字明显比其他 App 大一圈，行距却没跟着变 → 字体被系统放大
• 整版错位、图片溢出、按钮叠在一起 → 渲染与 CSS 兼容问题
• 只有一个区块错，别的都正常 → 那个区块用了微信不认的写法

字体放大这条最容易被漏掉。微信里有个全局设置：我 → 设置 → 通用 → 字体大小。部分安卓机型调大之后，网页字号会跟着一起变，而你 CSS 里写死的是 px，容器宽度没变，于是全部挤成一团。

排查时先问客户一句「你微信字体是不是调大了」。这一句话经常能省掉半天，还能让客户觉得你懂他的手机。

真机验证别只用自己的手机。为一个客户的问题，我们当时找了四台机器：iPhone 13、红米 Note、华为 Mate 40、一台老 OPPO。只有那台 OPPO 复现了，而客户用的正是同款。后来这台 OPPO 就成了我们测手机端的固定参照。

五个最常见的差异点，按遇到频率排

这两年改稿、改站攒下来的，基本覆盖八成反馈。前两条是排版问题，后三条是能力问题，处理思路不一样。

• 字号被系统设置放大｜样式里加 -webkit-text-size-adjust: 100%，字号改用相对单位，容器留出弹性
• 视频不动｜微信内默认不自动播，要加 muted 与 playsinline，并且接受「用户点一下才播」这件事
• 底部固定栏被顶起来｜输入框获得焦点时视口往上推，position: fixed 的元素跟着跑
• 分享出去只有一条灰链接｜公众号后台没配 JS 接口安全域名，卡片就没有标题、缩略图和描述
• 白屏或提示不安全｜证书链缺中间证书，桌面浏览器会自动补，微信里不一定

分享这条最容易被忽略，因为它不影响打开，只影响传播。客户把文章转到群里，别人看到的是一条没有图的链接，点的人少一大截，而你在后台统计里只会看到「转发带来的访问很少」，看不出原因。

还有一条不算 bug、但常被投诉：微信里点 apk 下载链接会提示已停止访问。微信不允许直接下安装包，只能引导用户走「右上角 → 在浏览器中打开」。这句提示最好直接写在按钮下面，不然客户会认定是网站坏了。

后台能改的，和改不了的

先说好消息。用建站系统搭的站，手机端相关的开关大多在后台：后台 → 站点设置 → 手机端，里面能改导航样式、模块顺序、哪些区块在手机上隐藏。不同版本菜单名有出入，找不到就按模块名搜一次。H5 自助建站的手机端设置那页写得比我这儿细，配了截图。

改不了的部分也得讲清楚：根字号策略、行高这些偏底层的值，模板系统给的是固定的，前台没有入口。碰上字体被放大到极端的机型，你只能在「换一套更抗压的模板」和「忍着」之间选一个。这话不好听，但比让你反复试样式表实在。

我们当时为了让一个客户的首页在放大字体下不破版，把三栏改成两栏，PC 端的对称感没了，客户看了两天才接受。

还有个工具值得装一次：vConsole。手机上不方便连电脑时，在页面里挂一个，能直接看微信里的报错和视口尺寸，比反复截图去猜快得多。上线前记得摘掉，它会把调试信息暴露给访客。

交付前在微信里过一遍的清单

• 字体调到最大，看标题和按钮有没有挤在一起
• 输入框点开，看底部栏有没有被顶走
• 转发给一个好友，看卡片有没有缩略图和描述
• 关掉 Wi-Fi 用 4G 打开一次，看首屏多久出来
• 换一台安卓机，把上面四条再走一遍

五条走完大概十五分钟。比起上线后被客户截图追问，这十五分钟很划算。

什么时候该考虑做小程序

不是所有站都值得做小程序。我的判断很朴素：如果这个页面承担的是反复打开、要登录、要下单这类动作，H5 在微信里就是别扭的；如果只是看一眼、了解下、打个电话，一个做扎实的 H5 完全够用。

差别在渲染归属。小程序的页面由微信自己渲染，字体设置、状态栏高度、返回手势都跟微信一致，上面那些兼容问题基本不存在。支付走微信原生，不用在几个页面之间跳来跳去。

我们配过的营销小程序，多数是先有官网、后补小程序，倒过来做的很少。原因也简单：官网是底座，小程序是入口，顺序反过来，内容还得再搬一次。营销小程序有哪些版本、分别能做什么，那页写得比我这儿细。

已经做了官网、想往小程序导流的，可以看小程序和官网怎么互相导流，里面列了三条路，其中菜单栏跳转那条改一次能用很久。

顺带分清一件事：微信里打开慢、和打开乱，不是一个问题。前者看网站打开速度的四层排查。把渲染问题当性能问题去压图片，白忙一场，图片压得再小，字号照样会挤。

小程序也不是万能的

要认证，300 元一年一交，个人主体做不了电商类目。每年年审一次，忘了，支付功能就停。

还有一个绕不过去的局限：小程序分享不到朋友圈，只能发好友和群，想在朋友圈传播得生成小程序码做成图片。这一点上 H5 反而自由，一个链接贴哪儿都能开。

所以我的建议一直是官网打底、小程序补体验，两个都别指望对方替自己干活。预算只够一样的时候，先把官网做好，微信里的适配问题一条条按上面的清单排掉，比急着上小程序见效快。

想先试试水的，营销小程序可以先在线试用，觉得合适再买；如果只是想把手机端 H5 先弄顺，H5 自助建站也有试用入口，自己点一遍再决定。