viewport元标签仅是适配起点，必须配合CSS响应式设计：用相对单位、媒体查询、flex/grid布局及打印专用样式，并真机验证iOS/Android兼容性。
用 viewport 元标签是基础，但只加它远远不够
很多人加了 <meta name="viewport" content="width=device-width, initial-scale=1"> 就以为完成了自适应，结果在 iPhone 上文字挤成一团、表格错位、侧边栏直接消失——这是因为 HTML 结构本身没做响应式设计。这个标签只是告诉浏览器“请按设备宽度渲染”，不解决元素如何随屏幕缩放、重排或隐藏的问题。
真正起作用的是 CSS 层面的控制，而 HTML 只需保证语义清晰、结构扁平、无固定像素宽高的硬编码布局（比如避免 <table width="800"> 或内联 style="width: 600px;"）。
CSS 必须用相对单位 + 媒体查询，px 在关键容器上就是陷阱
简历里常见的“左右两栏”“技能条”“时间轴”等模块，如果用 px 写死宽度（如 width: 300px;），在小屏上必然溢出或横向滚动。必须改用 %、rem、em 或 max-width 配合 flex/grid。
- 主内容区用
max-width: 800px;+margin: 0 auto;，既保大屏阅读舒适，又让小屏自动收缩 - 技能栏用
display: flex; flex-wrap: wrap;，比浮动或表格更可靠 - 所有字体大小统一用
rem，根字体设为html { font-size: 100%; }，再通过媒体查询动态调：@media (max-width: 480px) { html { font-size: 87.5%; } } - 避免
min-width: 960px;这类锁死最小宽度的写法，它会让小屏强制出现横向滚动条
打印和 PDF 导出时自适应会失效，得单独加 @media print
用 Chrome “另存为 PDF” 或微信内嵌浏览器导出简历 PDF 时，@media screen 规则全部失效，字体变小、分页错乱、背景色遮盖文字是高频问题。
立即学习“前端免费学习笔记（深入）”；
必须显式声明打印样式：
@media print {
* { -webkit-print-color-adjust: exact; }
body { font-size: 12pt; line-height: 1.4; }
.sidebar, .contact-info { page-break-inside: avoid; }
img { max-width: 100% !important; height: auto; }
a { color: #000 !important; text-decoration: none; }
}特别注意：iOS Safari 打印预览不支持 flex 换行，所以打印专用布局建议退回 block + margin 控制间距。
测试不能只看 Chrome DevTools 的模拟器
DevTools 的“Responsive Design Mode”能快速验证断点，但它不模拟真实渲染引擎差异。以下三点必须真机验证：
- iOS 微信内置浏览器（WKWebView）对
vh单位有顶部地址栏高度干扰，导致页面底部被截，要用min-height: 100dvh;替代min-height: 100vh; - Android 旧版 UC 浏览器不支持
gap属性，grid-gap要补margin回退 - 部分邮件客户端（如 Outlook iOS）会剥离
<style>标签，关键样式建议内联到class对应的style属性中（仅限字体、颜色、简单 padding）
最省事的真机检查路径：写完后用手机浏览器打开 GitHub Pages 或 Vercel 链接，横竖屏切换三次，再点右上角「分享→生成 PDF」看实际效果——这比任何模拟器都准。
