纯html+css可实现体面、可转发、适配手机的电子邀请函，关键在于语义结构、响应式布局与图片懒加载控制；微信全屏需严格设置head中viewport标签，图片用webp+picture回退并禁用首屏lazy，动画用intersectionobserver触发，分享靠open graph标签，保存图片用canvas生成并提示长按，拨号链接须带+86前缀，字体栈和对比度需兼顾多端可读性。
直接说结论：用纯 HTML + CSS 就能做出体面、可转发、适配手机的电子邀请函，不需要框架、不依赖后台，重点在语义结构 + 响应式布局 + 图片懒加载控制。
怎么让邀请函在微信里点开就全屏显示、不缩放、不跳转
微信内置浏览器（X5内核）对 <meta name="viewport"> 非常敏感，漏掉或写错会导致页面被强制缩放、左右滑动、字体糊。必须加这行，且不能有空格或换行：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
常见错误：
- 写成
user-scalable=yes→ 微信里双击会放大，破坏阅读流 - 漏掉
maximum-scale=1.0→ iOS 微信下横屏时可能意外拉伸 - 把这段放在
里 → 必须在中，否则首屏渲染就错了
图片怎么放才不卡顿、不破图、还能带入场动画
邀请函核心是视觉，但大图直塞 <img src="xxx.jpg"> 会导致白屏久、加载失败率高。实际做法是：
- 首屏主图用
<img loading="lazy">，但首页主视觉图必须删掉loading属性（设为loading="eager"或直接不写），否则微信里常出现“图没出来文字先堆一起”的尴尬 - 所有图片统一转成 WebP 格式（比 JPG 小 30%+），用
<picture></picture>回退：<picture><source srcset="hero.webp" type="image/webp"> @@##@@ </source></picture>
- 入场动画只对非首屏元素用
opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s;，配合 JS 监听IntersectionObserver触发，避免一打开就全动、耗性能
按钮点击后怎么直接唤起微信分享、保存图片或拨号
微信环境里不能用普通 window.open 或下载链接，得靠微信 JS-SDK，但多数人不想接入 SDK。更轻量的替代方案是：
- 分享：引导用户点右上角「…」→「发送给朋友」，页面本身只需确保
<meta property="og:title">等 Open Graph 标签齐全，微信会自动抓取封面和描述 - 保存图片：用
canvas绘制邀请函内容后转toDataURL，再生成临时@#@#@#@#@#@#@#@#@#@0，务必加+86前缀，否则海外用户点开会拨错
最易被忽略的是字体 fallback 和颜色对比度：别用系统默认灰字配浅灰背景，微信里反光屏根本看不清；中文字体栈一定要写全 font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;，否则安卓机上全是方块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
