HTML转PDF手机适配失效的根本原因是PDF渲染引擎不执行JS、不触发媒体查询、不识别viewport语义；需用@media print覆盖样式，禁用rem/vw，wkhtmltopdf须设page-width/zoom，html2pdf.js需用scale+固定jsPDF格式。
HTML 转 PDF 时手机适配失效的根本原因
直接用 html2pdf.js 或 wkhtmltopdf 渲染带 viewport 的响应式 HTML，生成的 PDF 往往仍是桌面宽度——因为 PDF 渲染引擎不执行 JavaScript、不触发媒体查询重排，也不识别 width=device-width 的语义。
用 @media print 强制覆盖移动端样式
PDF 导出本质是“打印”，浏览器和多数服务端工具（如 wkhtmltopdf）会优先匹配 @media print 规则。把关键响应式规则复制进这里，才能真正生效：
@media print {
body {
width: 375px !important; /* 模拟 iPhone SE 宽度 */
margin: 0 auto !important;
font-size: 14px !important;
}
img, video, iframe {
max-width: 100% !important;
height: auto !important;
}
.container {
width: 100% !important;
padding: 0 16px !important;
}
}- 不要依赖
@media screen and (max-width: 768px)—— 它在 PDF 中基本被忽略 -
!important是必要的，否则默认打印样式（如 96dpi 下的 800px 宽）会覆盖你的设置 - 避免使用
rem或vw单位，PDF 渲染器对它们支持极差；统一用px或%
wkhtmltopdf 必加的命令行参数
即使 HTML 写对了，wkhtmltopdf 默认仍以桌面视口渲染。必须显式指定页面尺寸和缩放：
wkhtmltopdf \ --page-width 375 \ --page-height 812 \ --zoom 1.0 \ --no-background \ input.html output.pdf
-
--page-width/--page-height直接设定输出 PDF 页面尺寸（单位：mm 或 px，取决于版本；推荐先用mm避免歧义） -
--zoom 1.0关键！不加这个，它会按 1280px 宽度缩放内容到 A4，导致文字过小 -
--no-background防止背景色/图干扰可读性（尤其深色模式下） - 若需更高精度，可加
--dpi 144提升字体清晰度
前端用 html2pdf.js 时绕过 viewport 陷阱
该库底层调用浏览器打印 API，所以 <meta name="viewport"> 完全无效。必须改用内联样式 + 手动缩放：
立即学习“前端免费学习笔记（深入）”；
const element = document.getElementById('content');
html2pdf()
.set({
margin: [10, 10, 10, 10],
filename: 'mobile-friendly.pdf',
html2canvas: { scale: 2, useCORS: true }, // 关键：scale ≥ 2 才能看清 375px 内容
jsPDF: { unit: 'px', format: [375, 812] } // 严格匹配手机尺寸
})
.from(element)
.save();-
html2canvas.scale不是放大 PDF，而是提升截图分辨率——scale: 2表示以 750px 宽截图再压缩进 375px PDF，文字才不模糊 -
jsPDF.format必须设为[375, 812]（或你目标机型尺寸），否则默认 A4 会拉伸变形 - 如果页面含异步加载内容（如图片、图表），务必在
.from()前用await html2canvas(...)确保渲染完成
最易被忽略的是：PDF 渲染不触发 resize 事件，也不执行 matchMedia 查询。所有“适配”必须靠静态 CSS 和硬编码尺寸落地，动态逻辑一律失效。
