移动端网页 ruby 注音显示异常时如何排查
浏览器不支持 ruby 注音时，需通过 rp 元素提供备用括号显示，否则注音内容将直接显示在基础文本旁。
确认浏览器是否支持 ruby 注音显示
即使标签结构正确，若浏览器不支持 ruby 注音显示，rt 元素的内容也不会以注音形式呈现。MDN 文档指出，ruby 注音主要用于显示东亚字符的发音，如日语假名或台湾注音符号。如果浏览器版本较旧或未启用相关功能，可能会忽略 rt 元素，仅显示基础文本。
可以通过查看浏览器兼容性列表或尝试在不同设备上测试来验证支持情况。MDN 提到该功能自 2015 年 7 月起在广泛设备上可用，但部分旧版浏览器可能仍无法正确渲染。若浏览器不支持，可使用 <rp> 元素提供备用的括号显示，如 <ruby>汉字<rp>(</rp><rt>注音</rt><rp>)</rp></ruby>，以便在不支持的环境中显示括号。
检查 rp 元素与 rt 元素的嵌套位置
rp 元素必须紧邻 rt 元素，且必须位于 ruby 标签内。规范要求 rp 元素必须紧邻 ruby 标签内的文本内容，且不能被其他标签包裹。例如，<ruby>汉字<rp>(</rp><rt>注音</rt><rp>)</rp></ruby> 是正确的结构，而 <ruby>汉字<rt>注音</rt><rp>)</rp></ruby> 可能导致解析异常。
检查代码时需确保 rp 元素内仅包含纯文本，且没有多余的空格或换行符影响解析。rp 元素的内容应为文本节点，不能包含 HTML 标签。如果 rt 元素内包含其他标签，浏览器可能会将其视为无效内容并忽略。使用浏览器开发者工具检查 DOM 结构，确认标签层级关系是否符合规范要求。
验证浏览器不支持时的渲染结果
通过浏览器开发者工具的元素检查功能，可以查看网页的实际渲染结果和 DOM 结构。在开发者工具中选中 ruby 元素，检查其子元素是否包含 rt 元素，以及 rt 元素的内容是否被正确显示。如果浏览器不支持 ruby，开发者工具可能会显示 rt 元素为普通文本，或完全忽略其内容。
还可以使用 CSS 样式验证注音是否生效。例如，为 ruby 元素设置字体大小或颜色，观察 rt 元素是否应用了样式。如果样式未生效，可能是浏览器不支持或标签结构错误。结合 MDN 提供的示例代码进行对比，确保代码实现与规范一致。
使用浏览器开发者工具检查渲染结果
通过浏览器开发者工具的元素检查功能，可以查看网页的实际渲染结果和 DOM 结构。在开发者工具中选中 ruby 元素，检查其子元素是否包含 rt 元素，以及 rt 元素的内容是否被正确显示。如果浏览器不支持 ruby，开发者工具可能会显示 rt 元素为普通文本，或完全忽略其内容。
还可以使用 CSS 样式验证注音是否生效。例如，为 ruby 元素设置字体大小或颜色，观察 rt 元素是否应用了样式。如果样式未生效，可能是浏览器不支持或标签结构错误。结合 MDN 提供的示例代码进行对比，确保代码实现与规范一致。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。