必须用HTTP服务托管HTML，因file://协议导致手机扫码拒绝加载；二维码需动态生成且目标URL为完整可访问地址；须添加viewport元标签并确保路径、视口、资源加载一致。
HTML 页面居中后生成二维码，扫码打不开？
不是二维码没生成，而是扫码跳转时路径错了——浏览器默认把 file:// 协议当本地文件处理，多数手机扫码直接拒绝加载，尤其含 css/js 的页面会白屏或报错 failed to load resource。
- 必须用 HTTP 服务托管 HTML，哪怕本地起个最小服务器（
python3 -m http.server 8000） -
<img>标签的src属性若写相对路径（如./style.css），二维码扫码后路径会以扫码设备当前 URL 为基准解析，极易 404 - 居中用的
margin: 0 auto或flex没问题，但二维码本身是图片，它不“知道”页面怎么居中——你扫的是整个 HTML，不是居中后的截图
用 qrcode.js 在页面里动态生成二维码
别导出图片再上传，直接让浏览器渲染：引入库后调用 QRCode 构造函数，把目标 URL 写进 text 参数，容器元素自动塞入 <canvas></canvas> 或 <svg></svg>。
- 确保目标 URL 是完整可访问地址，比如
https://example.com/page.html，不是page.html - 如果页面本身带查询参数（如
?id=123），要手动拼进去：window.location.origin + window.location.pathname + '?id=' + id - 避免在
DOMContentLoaded之前初始化，否则容器 DOM 还没挂载，new QRCode(...)会报Cannot read property 'appendChild' of null - 移动端扫码后白屏？检查是否用了
display: none隐藏了二维码容器，部分扫码器不触发重绘
用 Python 脚本批量生成 HTML+二维码文件
适合做一批静态落地页（如活动单页、设备说明页），每个 HTML 文件内嵌对应二维码，全部离线可用。
- 用
qrcode库生成图片：qrcode.make('https://...')，再用.save()存成qr.png - HTML 模板里用绝对路径引用二维码：
<img src="qr.png" alt="QR">，不要用../或变量路径 - 生成脚本里注意路径拼接：用
os.path.join()，别硬拼'./' + name + '.html'，Windows 下会出错 - 生成完别直接双击打开 HTML——又回到
file://问题；应统一用http://localhost:8000/xxx.html访问
扫码后页面样式错乱或文字挤在一起？
不是二维码的问题，是 HTML 缺少响应式基础。手机扫码后浏览器按移动视口渲染，但你的 HTML 没设 <meta name="viewport">，导致缩放异常或布局崩塌。
- 必须加这行：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 居中用的
max-width和padding值，在小屏上可能过宽，建议加媒体查询：@media (max-width: 480px) { .container { padding: 10px; } } - 字体单位别只用
px，混用rem或em，否则缩放后文字和容器比例失调 - 二维码图片本身别设死宽高，用
width: 100%; max-width: 200px;，防拉伸变形
真正麻烦的从来不是生成二维码，而是让扫码后的环境跟开发时一致——协议、路径、视口、资源加载顺序，漏掉一个，用户扫出来就是白屏或乱码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
