根本原因是ruby默认内联行为+未约束物理尺寸+缺窄视口适配；需设line-height≥1.4、vertical-align:text-top、rt用clamp响应式字号、逐字间插零宽空格、rp强制display:none。
ruby 在窄屏设备上容易换行错位、拼音被裁、基字与注音脱节——根本原因不是结构写错了，而是默认 inline 行内行为 + 未约束物理尺寸 + 缺少窄视口适配策略。
为什么 ruby 在手机上会“断开”或“挤出屏幕”
浏览器把 ruby 当作普通内联元素处理，其高度由内部 rt 的字体大小和行高共同决定。窄屏下容器宽度压缩，但 ruby 不会自动折行（基字优先不断），rt 就可能溢出右侧，或被截断。更隐蔽的问题是：当 rt 字号用 0.6em 这类相对单位时，在小屏上实际渲染的物理像素可能不足 1px，触发亚像素模糊或错位。
-
ruby默认不换行，white-space: nowrap是隐式行为，不能靠word-break强制拆分 - 多字连用如
<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby>之间若无空格或 - 使用
font-size: clamp(12px, 2.5vw, 14px)等响应式字号时，rt的缩放比例可能和基字不同步，导致对齐漂移
必须显式控制 ruby 的物理高度和换行边界
别依赖浏览器默认 baseline 对齐，窄屏要主动“钉住”垂直空间，并允许合理断点。
- 给
ruby加line-height: 1.4（至少比基字行高大 0.4），防止rt贴底或上浮；同时设vertical-align: text-top统一锚点 - 为防止整组
ruby被挤出容器，用ruby { display: inline-block; }+max-width: 100%，再配合overflow-wrap: break-word（注意：只对基字生效，rt仍需单独控制） - 逐字
ruby之间插入零宽空格，既不影响视觉，又提供合法换行点：<ruby>一<rt>yī</rt></ruby><ruby>衣<rt>yī</rt></ruby> - 禁用
rt { font-size: 0.6em }这类纯相对值；改用rt { font-size: clamp(10px, 2vw, 12px); }，确保最小物理尺寸 ≥ 10px
移动端必须关闭 rp 标签的可见渲染
rp 在 iOS Safari 和部分 Android WebView 中渲染不稳定：有的显示括号，有的不显示，还有的把括号撑开间距。它本就只是 fallback，窄屏下更不该让它参与布局。
- 强制隐藏：
rp { display: none; }，不要依赖 UA 判断或 JS 动态移除 - 绝对不要在
rp里写空格或换行，哪怕服务端生成也要 trim ——<rp></rp>会导致 Safari 忽略整个rtfallback - 如果必须保留括号语义（如兼容极老 UC 内核），用伪元素替代：
rt::before { content: "("; }+rt::after { content: ")"; }，并加font-size: 0.7em缩小
真正难的不是写出能跑的 ruby，而是让每个汉字、每个拼音、每个换行点都落在整数物理像素上——尤其在 iPhone 15 Pro 的 3x DPR 屏幕上，0.333em 这种值会直接导致渲染偏移。窄屏优化的终点，是让屏幕阅读器读得准、眼睛看得清、手指划得稳，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
