响应式邀请函不能直接套Bootstrap，因微信X5内核忽略CSS优先级、禁用transform层叠上下文，且flex/grid支持极不稳定；需降级使用max-width+margin、float/inline-block及限定断点的@media，规避vh/rem等高风险单位。
响应式邀请函为什么不能直接套 Bootstrap？
因为微信内置浏览器（X5 内核）会忽略部分 CSS 优先级、禁用 transform 层叠上下文，且对 flex 和 grid 支持极不稳定——尤其在 iOS 微信 8.0.45 以下版本，display: flex 可能被完全忽略，导致文字堆叠、按钮错位。真正稳的不是“写得现代”，而是“退到能活下来的地方”：用 max-width + margin: 0 auto 控制宽度，用 float 或 inline-block 做局部排列，@media 查询只针对 min-width: 320px 和 max-width: 480px 两个断点做微调，不碰 vh、rem 这类高风险单位。
首屏白屏/图片加载失败的三个硬性条件
微信里邀请函首屏图没出来，90% 是卡在这三件事上：
-
loading="eager"必须显式加在首屏loading="lazy"的拦截比 Chrome 更激进 -
type="image/webp"的src必须是 JPG（不是 PNG），否则部分安卓微信会拒绝解码 - 所有图片 URL 必须带完整协议（
https://开头），微信会拦截//cdn.example.com/xxx.jpg这类协议相对路径
按钮点击后唤起拨号或保存，不接 JS-SDK 怎么办？
微信环境里，window.open 和 a[download] 全部失效，但原生能力还在，只是要绕过限制：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 拨号链接必须写成
@#@#@#@#@#@#@#@#@#@0，漏掉+86前缀，iOS 微信会当成普通文本不响应 - 保存图片用
canvas绘制后转toDataURL("image/png")，再生成download属性，必须加提示文案：“长按图片保存” - 分享不能靠 JS 触发，只靠
、、三者齐全，微信才会在右上角「…」菜单中显示缩略图和描述
动效卡顿、低端机直接白屏的根源在哪？
不是动画太炫，而是触发时机和资源加载没隔离：
- 所有入场动画（
opacity、transform）必须用IntersectionObserver监听进入视口才启用，不能 onload 就全开 - 音频资源（如背景音乐）必须设
preload="metadata"，且首次播放必须由用户手势（click）触发，否则 Chrome 和微信都会静音拦截 - 避免在
scroll事件里直接改样式，改用requestAnimationFrame节流，否则低端安卓机滚动时帧率直接掉到 10fps 以下
微信里最常被忽略的，是 viewport 标签必须严格写在 最开头、无空格、无换行——哪怕多一个空格，iOS 微信就可能放弃全屏渲染，导致字体糊、左右滑动。这不是兼容性问题，是微信 X5 的解析硬规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
