平板上ol显示异常（数字截断、文字糊团、缩进过大）主因是viewport缺失或媒体查询断点逻辑错误，而非样式本身；须确保viewport标签正确置于head最前，用min-width而非max-width设断点，并统一list-style-position: inside配合显式padding-left校准。
ol列表在平板上文字过小、缩进错位，根本不是样式问题
平板上ol显示异常（数字被截断、文字糊成一团、左侧缩进过大），90% 情况下跟ol本身无关，而是 viewport 缺失或媒体查询断点逻辑反了。浏览器按 980px 宽度渲染时，ol的默认字号、margin-left和计数器布局全会崩——你调font-size或padding只是在补漏，源头没堵住。
viewport 标签写错一个字符，ol 就永远长不大
必须确保： 出现在 最前面，且 name 是 "viewport"（不是 "viewpoint"），content 必须含 width=device-width。
- 漏掉
width=device-width：iOS Safari 和 Android Chrome 默认以 ~980px 渲染，ol的rem计算基准崩坏，1.2rem可能只等于 12px 物理尺寸 - 标签位置靠后：放在
后面，旧版 Safari 直接忽略，样式已按桌面宽度计算完毕 - 加了
user-scalable=no：高 DPR 平板（如 iPad Pro）双指缩放失效，用户被迫凑近看数字，反而放大了可读性问题
用 min-width 断点控制 ol 布局，别信 max-width: 768px
把平板当“大号手机”套 @media (max-width: 768px)，会导致 iPad Air（竖屏 820px）、Surface Pro（竖屏 1080px）完全不触发任何响应式规则，ol 仍按手机样式挤成窄列、数字重叠。
- 基础样式（手机）直接写：
ol { font-size: 1rem; margin-left: 0; padding-left: 1.2rem; } - 平板起始断点用：
@media (min-width: 768px) { ol { font-size: 1.125rem; line-height: 1.6; } } - 横屏或大屏平板加一层：
@media (min-width: 1024px) { ol { column-count: 2; column-gap: 2rem; } }，避免单列过长
ol 的计数器在平板上容易被截断，关键在 padding 和 list-style-position
iOS Safari 对 ol 的 list-style-position 渲染不稳定，设 inside 时数字常被左侧 padding 切掉；设 outside 又可能因父容器 overflow: hidden 裁剪。真正可控的是手动控制留白。
- 统一用
list-style-position: inside+ 显式padding-left: 2.5rem（留出数字+间隙空间） - 避免依赖
margin-left控制缩进，它在不同 UA 下行为差异大 - 若需多级嵌套
ol，每层用counter-reset+counter-increment替代原生序号，避免 Safari 对嵌套计数器的解析 bug
真正难的不是让数字变大，而是接受：平板上的 ol 不是桌面的缩小版，它的字号、行高、缩进必须独立校准；而所有这些的前提，是 viewport 正确、断点合理、不把高 DPR 当低分辨率处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
