HTML证书卡片应设宽375px（iOS标准）并配viewport meta标签，用Flex布局+px/rem字体+安全字体栈，确保社交平台截取首屏时完整显示。
HTML证书卡片怎么设宽高才不被社交平台裁掉
微信、微博、小红书这些平台分享链接时，会自动抓取 <meta> 里的图片预览（og:image），但如果你直接把 HTML 页面当“卡片”发出去，它只会截取首屏——而多数人没意识到：默认浏览器视口和社交平台预览容器尺寸根本不匹配。
真正起作用的不是你写的 width 和 height，而是 <meta name="viewport"> + 容器级约束 + 实际渲染像素比。常见错误是用 100vw 做卡片宽度，结果在微信里被砍掉右半边。
- 微信内嵌 WebView 默认按 375px 宽度缩放，建议卡片容器固定为
width: 375px（iOS 标准）或414px（iPhone Plus/12+） - 必须加
<meta name="viewport" content="width=375, user-scalable=no">，否则 iOS Safari 会强行缩放 - 避免用
%或vw布局主体内容；文字大小用px或rem（根字号设为16px）更稳 - 导出为图片再分享？那另说——但纯 HTML 卡片，就老老实实按设备逻辑来
如何让证书名、日期、签名区域在各端对齐不跑位
CSS Flex/Grid 在微信内置浏览器里支持度还行，但有个隐藏雷区：vertical-align 对 inline-block 元素失效，margin-top 在某些安卓 WebView 里会塌陷。证书最常崩的就是签名线和名字错位。
推荐用 Flex 布局做主结构，但所有子元素必须显式声明 align-items 和 justify-content，别依赖默认值。
立即学习“前端免费学习笔记（深入）”；
- 证书标题用
<h1>包裹，设font-size: 20px、line-height: 1.4，避免行高继承混乱 - 学员姓名区域加
text-align: center+min-height: 2em，防空数据时塌陷 - 签名栏不要用
border-bottom，改用background-image: linear-gradient(...)模拟手写线，兼容性更好 - 日期用
<time datetime="2024-06-15">2024年6月15日</time>，语义清晰且方便后续提取
分享到朋友圈时为什么显示空白或白屏
不是代码错了，大概率是 og:image 没配，或者配了但图片路径 404 / 跨域 / 尺寸超限。微信要求 og:image 必须是 HTTPS 直链、小于 5MB、长宽比在 1:1 到 3:2 之间（推荐 960×540 或 1200×630）。
很多人把证书页面本身当 og:image，但微信不会渲染 JS，也不会等 CSS 加载完——它只读静态 HTML 中的 <meta property="og:image">，且只认绝对路径。
- 检查
<meta property="og:image" content="https://xxx.com/cert-2024-abc.png">是否存在且可公开访问 - 用 curl 测试：
curl -I https://xxx.com/cert-2024-abc.png看返回是不是200 OK - 别用
localhost或内网地址；测试阶段可用ngrok临时映射 - 如果证书是动态生成的，得提前渲染成 PNG 并存 CDN，HTML 页面只负责展示和分享跳转
字体加载失败导致证书看起来像乱码
本地调试看着好好的，一发到线上就变成宋体大杂烩，八成是用了 Google Fonts 或自托管的 @font-face 但没处理降级和加载时机。微信、QQ 内置浏览器对 font-display: swap 支持不稳定，有时字还没加载完就截图了。
最省事的办法：放弃 Web Font，用系统安全字体栈。证书又不是海报，不需要花哨字形，清晰可读优先。
- 正文用
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - 避免
font-weight: 300这类细字重，安卓上容易发虚；用400或500更稳妥 - 真要用自定义字体，必须加
font-display: block+ JS 检测document.fonts.load()成功后再显示内容 - 中文字符集别漏掉
U+4E00-9FFF（基本汉字区），否则“證書”变方框
证书卡片的本质是“一次渲染即交付”，不是响应式网站。适配的关键不在技术多炫，而在清楚知道每个平台截的是哪一帧、信的是哪个尺寸、认的是哪种路径。细节松动一点，整张卡片就废在转发前一秒。
