<code>标签本身不参与布局适配，问题根源在于容器和CSS样式缺失；需对<pre><code>组合设置overflow-x: auto、display: block及响应式font-size，并避免硬编码像素值。
<code> 标签本身不参与布局适配，它只是行内语义标签，渲染效果完全取决于 CSS。手机上代码块显示错位、横向滚动条、文字过小或被截断，问题从来不在 <code>，而在它所在的容器和样式链。
为什么<code>在手机上常出问题
常见现象包括：单行代码溢出屏幕、多行代码块没有滚动、字体小到看不清、背景色撑不满、复制按钮错位。根本原因不是标签用错了，而是默认样式没覆盖移动端约束：
-
<code>默认是display: inline，不换行也不限制宽度，父容器若没设white-space或overflow，内容直接撑破 - 多数框架（如 Bootstrap、GitHub Markdown 渲染器）对
<code>只做基础样式，没针对max-width: 100vw、font-size响应式处理 - 嵌套在
<pre>里时，<pre>的white-space: pre会保留空格和换行，但若没配合overflow-x: auto，长行必溢出
<pre><code> 组合必须加的三行 CSS
这是最常用也最易漏的组合。只给 <code> 加样式不够，必须从 <pre> 容器入手：
-
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }：启用横向滚动，iOS Safari 滚动更顺滑 -
pre code { display: block; padding: 8px 12px; font-size: 0.85rem; }：让<code>变成块级，避免 inline 溢出；font-size用rem而非固定px，随根字号缩放 -
pre { max-width: 100%; word-break: normal; }：防极端长单词（如 base64、URL）撑破容器；word-break: break-all慎用，会破坏代码可读性
避免用 font-size: 12px 硬编码
移动端用户可能开了系统「更大字体」或「辅助缩放」，硬写 12px 会直接无视这些设置，导致文字不可读：
立即学习“前端免费学习笔记（深入）”；
- 改用相对单位：
font-size: 0.75rem（假设根字号已按calc(100vw / 375 * 16px)设置） - 或加媒体查询兜底：
@media (min-width: 320px) { pre code { font-size: 0.7rem; } } - 别信「设计稿标注 12px 就写死 12px」——那是桌面端思维，移动端必须让字体随系统偏好可调
真机调试时最容易忽略的一点
很多开发者在 Chrome DevTools 里模拟 iPhone，看到滚动条正常就以为 OK，但真机上常卡住或失焦。这是因为：
- iOS Safari 在
overflow-x: auto容器里点击<input>或触发select时，会意外失去焦点 - 解决办法是在
pre上加touch-action: manipulation，告诉浏览器“这个区域只用于滚动，别干扰表单操作” - 同时确保外层没有嵌套多个
overflow容器，否则手势识别会冲突，一拉就卡
