code在移动端需重置样式：设display为inline-block/block、指定等宽字体、启用断词、用em而非rem设padding、font-size用clamp()限幅并兼容旧ios、pre>code需额外控制白空间与溢出。
code 标签在移动端不会自动换行、缩放或适配字体，直接用会文字溢出、点击困难、阅读吃力——这不是样式没写好，而是它默认行为就无视移动交互。
为什么 code 在手机上显示异常
浏览器对 code 的默认样式是 white-space: normal（部分旧版 Safari 甚至仍是 white-space: pre），但关键问题不在这里：code 是行内元素，不继承父容器的 font-size 缩放逻辑，也不响应 viewport 的 rem 基准重算；更麻烦的是，iOS Safari 对短字符串的 code 会强制使用系统等宽字体（如 SF Mono），而该字体在小字号下字间距塌陷、连字符难分辨。
必须加的 CSS 重置规则
不能只靠全局 code { font-size: 1em; }，要针对性覆盖：
-
code必须设为display: inline-block或display: block（视上下文），否则在 flex 容器里会被压缩、丢失 padding - 显式声明
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;，避免 iOS 混用系统字体导致行高突变 - 加
word-break: break-word+overflow-wrap: break-word，否则长 token（如 base64、URL）直接撑破容器 - 移动端触控最小点击区域是 44×44px，所以
padding: 0.2em 0.4em（用 em 而非 rem，防闪屏）比固定 px 更稳
和 rem 布局共存时的字体大小陷阱
如果你用了 html { font-size: calc(100vw / 375 * 16px); } 这类内联 calc，code 里的 font-size: 0.85em 会随根字号跳变——但用户横屏时 100vw 突然变大，code 字号可能从 13px 跳到 22px，破坏代码可读性。
- 推荐改用
font-size: clamp(12px, 0.85em, 14px)，限幅比纯 em 更可控 - 绝对不要在
code上用rem单位，它会和 JS 动态设置的根字号冲突，尤其在键盘弹出后 viewport 高度收缩时 - 老 iOS（≤12）不支持
clamp()，得回退：用媒体查询@supports not (font-size: clamp(1px, 1em, 1px)) { code { font-size: 13px; } }
嵌套在 pre 里时的额外注意点
pre > code 组合常见，但风险叠加：
-
pre默认有white-space: pre，若里面code又含换行，可能多出空行；加pre { margin: 0; line-height: 1.4; }控制 - 安卓 WebView 对
pre的max-width计算不准，需额外加pre { overflow-x: auto; }和code { display: block; } - 别给
pre设font-size，只调code，否则双层缩放会让字号失控
真正麻烦的不是怎么写样式，而是所有这些规则都得在 内联生效——等 CSS 文件加载完再渲染，code 已经按错误尺寸画过一帧了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
