能用，但需严格遵循结构语义规则：rt必须紧贴基文字并嵌套于ruby内，rp须在rt内且仅含纯括号；旧版uc/qq浏览器可能忽略rt；多语言混排需用bdi隔离方向并显式声明lang属性。
ruby标签在主流移动浏览器中是否能用
能用，但必须满足结构和语义前提——ruby单独存在无效，rt必须紧贴基文字且嵌套在ruby内，否则 iOS Safari、Chrome for Android、Samsung Internet 全部忽略注音渲染。Android WebView（基于 Chromium 90+）和 WKWebView（iOS 15.4+）支持良好；但旧版 UC、QQ 浏览器（基于 Blink 70 前）可能只显示基文字，不渲染rt。
移动端常见崩溃场景：rp 标签写错导致样式错乱
rp不是可选装饰，而是有硬性嵌套规则的 fallback 工具。错误写法会直接让 Chrome 显示括号、Safari 却不显示，同一段 HTML 在双端视觉分裂：
-
<rt><rp>(</rp>hàn<rp>)</rp></rt>✅ 正确：两个rp都在rt内部，内容仅为纯括号 -
<rp>(</rp><rt>hàn</rt><rp>)</rp>❌ 错误：rp脱离rt，被所有现代浏览器忽略 -
<rt><rp>( </rp>hàn</rt>❌ 错误：rp含空格，部分安卓 WebView 不触发 fallback
最稳做法：服务端或构建时根据 UA 判断是否为老内核（如 Android 4.4 WebView），仅对需要 fallback 的环境插入rp；否则一律省略，避免干扰。
多语言混排时 ruby 渲染错位的根本原因
当拼音出现在阿拉伯文、希伯来文或日文上下文中，ruby本身不控制文本方向或语音归属——仅靠它，iOS Safari 可能将“لِي李”里的拼音按 RTL 上下文右对齐，甚至被屏幕阅读器误读为阿拉伯语发音。
- 必须用
bdi隔离方向：<bdi><ruby>李<rt>lǐ</rt></ruby></bdi> - 必须显式声明语言：
<ruby lang="zh-Hans">李<rt>lǐ</rt></ruby>，否则语音引擎无法匹配中文 TTS - 禁止给
bdi加dir属性——bdi默认就是dir="auto"且带unicode-bidi: isolate
移动端实际项目中最容易被忽略的三个细节
真实交付中，问题往往不出在“会不会用”，而出在边界处理的疏忽：
-
rt内容为空时（如某字无拼音），不能输出<rt></rt>——部分 iOS VoiceOver 会读出“空白注音”，造成无障碍干扰 -
ruby不支持自动换行，长拼音（如“chūn tiān de huā ér fēn fāng”）超出容器宽度时直接溢出，需配合ruby { white-space: nowrap; }+ 父容器overflow: hidden或text-overflow: ellipsis - 服务端渲染时若未做 UA 判断，给 Chrome for Android 插入了
rp，会导致括号在顶部重复显示（Chrome 渲染rp，又渲染rt），而 Safari 完全不显示rp——视觉一致性彻底崩坏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
