移动端适配第一关是正确书写viewport meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，其中width=device-width确保CSS像素匹配设备逻辑宽度，initial-scale=1.0防止字体重排与模糊，缺一不可。
viewport meta 标签必须写对
移动端页面不缩放、文字不模糊、布局不溢出，第一关就是 <meta name="viewport">。漏写、写错或硬编码 width=320 都会导致整个页面在 iphone 或安卓高 dpi 屏上显示异常。
- 正确写法只有这一种主流组合：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> -
width=device-width是关键——它让浏览器把 CSS 像素宽度设为设备逻辑宽度（比如 iPhone 14 是 390px），不是物理像素，也不是固定值 -
user-scalable=no要谨慎：iOS Safari 在双击缩放时会强制触发 zoom，加了这个可能影响可访问性；仅在 Web App 场景下考虑启用 - 别用
maximum-scale=1.0或minimum-scale=1.0组合，它们在部分安卓浏览器中会破坏 pinch-zoom 行为，且 WCAG 不友好
CSS 中的 px 不等于物理像素，但 rem/vw 更可靠
写 font-size: 16px 在 iPhone 上可能小得看不清，因为默认 16px 是基于桌面基准；移动端真正可控的是相对单位。
- 优先用
rem：根字体大小设为html { font-size: 16px; }，再配合 JS 动态调整（如根据document.documentElement.clientWidth缩放），能兼顾高清屏和缩放需求 -
vw适合全宽组件（如 banner、tabbar），但注意：100vw 包含竖向滚动条宽度，iOS Safari 下有时会多出几像素溢出，可用max-width: 100vw+overflow-x: hidden抑制 - 避免直接写死
px值做间距或圆角，尤其是border-radius: 2px这类——在 3x 屏上几乎不可见，应改用0.1rem或2px配合device-pixel-ratio媒体查询兜底
触摸事件比 click 更快，但别乱替换
click 在 iOS 上有约 300ms 延迟，是因为浏览器要判断用户是否双击缩放。但并不是所有地方都该换 touchstart。
- 按钮、链接等可交互元素，优先用
cursor: pointer+touch-action: manipulation，这是最轻量的解法，Chrome 和 Safari 都支持 - 真要监听触摸，用
touchend而非touchstart：前者更接近 click 的语义（手指抬起才算触发），避免误触 - 如果用了
touchstart，记得加event.preventDefault()，否则可能触发默认滚动或缩放行为；但加了之后，该元素就无法被屏幕阅读器识别为可点击，需补role="button"和aria-pressed - 别在
scroll容器里监听touchmove并阻止默认行为——这会直接禁用原生滚动，尤其在 iOS 上卡顿明显
Flexbox 和 Grid 在移动端兼容性已足够，但 gap 仍要小心
现代移动浏览器（Chrome for Android ≥ 80，Safari ≥ 14.5）基本支持 Flexbox 和 Grid，但 gap 在老版 Safari（≤ 14.4）中不生效，且部分安卓 WebView 会忽略 gap 对 flex-direction: column 的作用。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 安全写法：用
gap同时配margin回退，例如：.item + .item { margin-top: 1rem; }，再在支持gap的环境里用@supports (gap: 1rem) { .container { gap: 1rem; } } -
justify-content: center在竖屏小屏上容易把内容挤出视口，建议搭配min-height: 100vh和overflow-y: auto防止截断 - Grid 的
fr单位在 iOS 16.4 之前对minmax(0, 1fr)支持不全，若需等分布局，用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))比1fr 1fr更稳
最常被跳过的其实是 viewport 的 initial-scale=1.0 缺失导致的字体重排，以及 rem 基准没随设备 dpr 动态调整——这两点一出，哪怕写了再多媒体查询，用户第一眼看到的仍是模糊或错位的页面。
立即学习“前端免费学习笔记（深入）”；
