ol标签本身无需适配，手机端序号错位等问题90%源于缺失或错误的viewport meta标签（正确写法：<meta name="viewport" content="width=device-width, initial-scale=1.0">）或CSS使用固定px值约束宽度/字号。
ol 标签本身不需要特殊适配，问题出在 viewport 和 CSS 上
HTML 的 <ol> 标签是语义化原生元素，浏览器默认支持所有设备，它自己不会“不适应手机”。真正导致手机上序号错位、文字过小、列表项挤在一起的，90% 是因为缺少或写错 <meta name="viewport">，或者 CSS 用了固定 px 值强行约束宽度/字号。
必须加且只能这么写的 viewport meta 标签
如果没加这个标签，iOS Safari 和多数安卓 WebView 会按 980px 宽度渲染整个页面，<ol> 内容被压缩成一团，序号和文字都看不清。
-
✅ 正确写法（仅此一种最小可用组合）：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
❌ 错误写法举例：
width=375（写死 iPhone 宽度，横屏/折叠屏/安卓机全崩）、user-scalable=no（禁缩放，可访问性违规，中老年用户无法操作）、只写width=device-width不带initial-scale=1.0（iOS 会先按 980px 渲染再缩放，touch 坐标偏移） - 该标签必须硬编码在 HTML 的
<head>最上方，早于任何 CSS/JS —— 动态插入、SSR 漏掉、Vue/React hydrate 阶段补，全无效
ol 列表内容在手机上显示异常的常见 CSS 坑
即使 viewport 正确，<ol> 里的 <li> 也可能因 CSS 失控：序号被截断、行高塌陷、文字换行错乱。关键不是改 <ol>，而是管住它的容器和字体。
- 避免给
<ol>或父容器设固定width: 320px、max-width: 375px—— 改用width: 100%或max-width: 100%，让其随视口自然伸缩 - 字号别写死
font-size: 16px；优先用rem或em，并确保根字体已动态设置（例如内联<style>html{font-size:calc(100vw / 375 * 16px);}</style>） - 老 iOS（≤12）不支持
calc(100vw / 375 * 1rem)这种混单位写法，必须统一为px，如calc(100vw / 375 * 16px) -
<li>内部若含块级元素（如<p>、<div>），注意清除默认 margin/padding，否则在小屏上容易撑破容器
需要自定义序号样式时，别用 list-style-type 硬改
比如想把数字换成「▶」或「•」，直接设 list-style-type: none + ::before 伪元素更可控。原生 list-style-type 在部分安卓低版本浏览器里渲染不稳定，序号可能错位或消失。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：
ol { list-style-type: none; counter-reset: item; }+li::before { content: counter(item) ". "; counter-increment: item; } - 这样序号完全由 CSS 控制，可自由调字号、颜色、间距，且不影响语义和可访问性（屏幕阅读器仍能读出序号逻辑）
- 避免用
value属性手动设每个<li>的编号 —— 容易在 JS 动态增删项后脱节，手机端触摸交互频繁时尤其难维护
真机调试比模拟器可靠得多，特别是 Safari 的缩放策略和微信内置浏览器对 <ol> 的渲染行为，模拟器根本复现不了。如果序号在 Chrome DevTools 模拟器里正常，但 iPhone 上错位，第一反应不是改 HTML，而是检查 viewport 是否真的生效、根字号是否被 JS 覆盖、以及有没有第三方 UI 库悄悄重写了 ol 的默认样式。
