单页简历要确保手机可读、ats正确解析、pdf导出不乱，必须落实三个硬性控制点：一是声明置于顶部；二是用等语义化标签替代div；三是添加@media print样式强制背景色、文字色并防分页截断。
单页简历要真正在手机上可读、在ATS系统里能被正确解析、导出PDF时不乱，核心不是“加动画”或“套模板”，而是几个硬性结构和样式控制点必须到位。
viewport 声明漏掉就全盘失效
本地双击打开看着好好的，一发到 GitHub Pages 或微信里点开就文字小得看不清——90% 是没写这行：<meta name="viewport" content="width=device-width, initial-scale=1">。它不是可选的“优化项”，而是移动端渲染的开关。没有它，浏览器默认按 980px 宽度渲染，再缩放适配，字体、间距全失真。
- 必须放在
最顶部，且只能有一条 - 别写成
content="width=375"这类固定值，会锁死所有设备 - 如果用了第三方 CSS 框架（如 Tailwind），也要确认它没覆盖或忽略这条声明
语义化结构直接决定 ATS 解析质量
招聘系统（ATS）靠 HTML 标签层级提取信息，<div class="section-skills"> 和 <code><section><h2>技能</h2></section> 的识别率差 3 倍以上。前者是“一堆 div”，后者是“一个带标题的语义区块”。
-
<header></header>包姓名、邮箱、电话——ATS 优先抓这里的内容 - 每块内容（教育、经历、技能）用
<section></section>+<h2></h2>，别用<div> 套 <code><h3></h3> - 邮箱链接必须是
@#@#@#@#@#@#@#@#@#@0，不能用 JS 加密或图片 - 根元素字号设
font-size: 1rem;，body 行高用line-height: 1.6;，避免像素固定值 - 主容器加
max-width: 800px;+margin: 0 auto;，防大屏文字撑满 - 手机下
<section></section>内部用flex-direction: column;，桌面改row，不用重写整套结构 - 加
@media print规则，强制background: #fff !important;和color: #000 !important; - 删掉所有
box-shadow、border、position: fixed - 给每个
<section></section>加break-inside: avoid;，防止经历条目被切到两页
响应式断点只设 2 个足够，但必须配 rem 和 max-width
盲目堆 media query 断点反而增加维护成本。实际只需管住两个关键尺寸：手机竖屏（≤768px）和桌面（>768px）。其余靠相对单位自然过渡。
导出 PDF 时内容被截断或背景消失？打印样式没写对
Chrome “另存为 PDF” 默认禁用背景色、删 margin、忽略 fixed 定位——这不是 bug，是引擎默认行为。必须显式覆盖。
最容易被跳过的其实是 viewport 声明和 @media print 这两处——它们不炫技，但缺一不可。写完先用手机 Safari 打开，再拖进 Chrome 打印预览，这两个动作比任何调试工具都管用。
