移动端适配需viewport、单位体系、资源加载三者协同：viewport必须写对（width=device-width+initial-scale=1.0），rem基准应通过calc()内联设置防闪屏，图片须用原生loading="lazy"和srcset，nginx需配合map+vary头实现正确缓存与路径分发。
移动端适配不是“加个 meta 标签就完事”，而是 viewport、单位体系、资源加载三者必须协同生效；漏掉任一环，真机上必出布局错乱或字体糊成一片。
viewport meta 标签写不对，后面全白搭
浏览器默认按 980px 宽度渲染 HTML，不加或写错 viewport，iOS 和安卓都会先缩放再塞进屏幕——文字小得看不清，按钮点不准，滚动卡顿。
- 必须写在
里，且只写一次 - 核心参数只有两个：
width=device-width（让 CSS 像素宽度 = 设备逻辑宽度）和initial-scale=1.0（禁用 Safari 自动缩放） - 别写
width=375或maximum-scale=1.0：前者在横屏时直接崩，后者在部分安卓 WebView 中锁死 pinch-zoom，还违反 WCAG - 慎用
user-scalable=no：双击缩放被禁，残障用户无法放大阅读
rem 基准不能靠 JS 在 DOMContentLoaded 里设
用 document.documentElement.style.fontSize 在 DOMContentLoaded 里动态设 rem，会导致闪屏：页面先按浏览器默认 16px 渲染，JS 执行后再重绘，文字突然变大/变小，体验极差。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法是用
calc()在内联计算：<style>html{font-size:calc(100vw / 375 * 16px);}</style>（以 375px 设计稿为基准） - 如果设计稿宽度不固定，改用
16px+ 媒体查询兜底，例如：@media (min-width: 414px) { html { font-size: 17.6px; } } - 避免在 JS 中监听
resize动态改font-size：触发重排频繁，老 iOS 卡顿明显
图片和懒加载必须原生 loading="lazy"，别碰第三方库
写了 srcset 和 sizes，但 Network 面板里永远只加载小图——大概率是用了 lozad.js 这类第三方 lazyload 库，它们直接篡改 src，完全无视 srcset 的响应式逻辑。
- 原生
<img loading="lazy" srcset="a.jpg 320w, b.jpg 768w" sizes="(max-width: 320px) 100vw, 50vw">是安全的，浏览器自己选最匹配的资源 - 第三方 lazyload 会破坏
Vary: User-Agent缓存逻辑，导致 CDN 返回错版图片 - 如果必须用 JS 控制加载时机，优先用 IntersectionObserver + 原生
src赋值，而非覆盖整个img属性
Nginx 的 index 指令本身不识别移动端
index index.html 只是告诉 Nginx “目录下默认找哪个文件”，它不会看 UA、也不会自动切路径。想让手机访问 / 时返回 /m/index.html，必须配合 map 或 try_files。
- 推荐用
map提前定义变量：map $http_user_agent $is_mobile { ~*[Mm]obile 1; default 0; }，再在location里用try_files /m/index.html /index.html =404; - 别在
server级大量用if+set：正则每次请求都执行，性能差，且易出作用域 bug - 必须加
add_header Vary "User-Agent";，否则 CDN 或浏览器缓存会把移动版内容错误地返回给桌面用户
最容易被忽略的是：所有相对路径资源（CSS、JS、字体）在移动端页面里必须与当前 HTML 路径对齐。比如 /m/index.html 里写 ./css/style.css，Nginx 就要确保 /m/css/ 目录真实存在——否则 404 不报错，只静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
