必须添加viewport标签、使用语义化section/h2结构、用rem控制响应式排版、补充print媒体查询——四点是简历网页在移动端可读、ats可解析、pdf可导出的基础前提。
viewport 标签没加，手机上文字小得根本没法读——这是你简历网页“看起来像做完了”，实则还没真正跑起来的第一道坎。
必须写死的 <meta name="viewport"> 行为
不是可选配置，是移动端渲染的开关。漏掉这行，浏览器默认按 980px 宽度渲染，再好的 CSS 都白搭。
正确写法只有一句：<meta name="viewport" content="width=device-width, initial-scale=1">
放在 里，且必须在 <title></title> 之后、CSS 引入之前。
别写成 content="width=375" 或加 maximum-scale——ATS 和 PDF 导出工具会拒识别。
用 <section></section> + <h2></h2> 替代一堆 <div><p>招聘系统（ATS）和屏幕阅读器靠语义标签定位内容，<code><div class="exp"> 对它们等于空白。<br>每个模块用一对 <code><section></section> 包裹，标题统一用 <h2></h2>：
– <section><h2>工作经历</h2>...</section>
– <section><h2>技能</h2>...</section>
不要嵌套 <h3></h3> 做子标题——<h2></h2> 已足够表达层级，多级标题反而干扰结构解析。响应式排版只靠三处 CSS 控制
不需要媒体查询堆满屏，核心就三点：
– 字号用 rem：比如 font-size: 1.1rem;，根元素 html 设 font-size: 16px 即可适配缩放
– 行高固定：line-height: 1.6;，避免小屏文字挤成一团
– 最大宽度限制：max-width: 800px; 加 margin: 0 auto;，防宽屏下文字拉得太开
别碰 px 字号、em 行高、或 width: 100% 全屏撑满——这些在 iOS Safari 里容易触发横向滚动条。
导出 PDF 前必须加 @media print
Chrome “另存为 PDF” 默认删背景、截长内容、忽略 margin——不是你代码错，是没告诉浏览器怎么印。
加这段就够了：
@media print {<br> * { background: white !important; color: black !important; }<br> body { margin: 0; padding: 0; }<br> section { break-inside: avoid; }<br>}
重点：
break-inside: avoid; 防止某段经历被硬切成两页；!important 是必须的，否则浏览器内置样式会覆盖你。真正卡住人的从来不是“怎么加动画”或“怎么连 GitHub”，而是 viewport 漏写、语义标签乱用、字号单位混搭——这些地方一错，简历连被扫一眼的机会都没有。
