纯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 微信下横屏时可能意外拉伸 - 把这段放在
<body>里 → 必须在<head>中，否则首屏渲染就错了
图片怎么放才不卡顿、不破图、还能带入场动画
邀请函核心是视觉，但大图直塞 <img src="xxx.jpg"> 会导致白屏久、加载失败率高。实际做法是：
立即学习“前端免费学习笔记（深入）”；
- 首屏主图用
<img loading="lazy">，但首页主视觉图必须删掉loading属性（设为loading="eager"或直接不写），否则微信里常出现“图没出来文字先堆一起”的尴尬 - 所有图片统一转成 WebP 格式（比 JPG 小 30%+），用
<picture>回退：<picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="婚礼主视觉"> </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，再生成临时<a download="请柬.png">链接 —— 注意 iOS 微信不支持download属性，要提示“长按图片保存” - 拨号：用
<a href="tel:+8613800138000">联系新人</a>，务必加+86前缀，否则海外用户点开会拨错
最易被忽略的是字体 fallback 和颜色对比度：别用系统默认灰字配浅灰背景，微信里反光屏根本看不清；中文字体栈一定要写全 font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;，否则安卓机上全是方块。
