Html 如何在设备之间保持文本大小一致，以便内容顶部的图形始终对齐

我正在开发一种工具，允许学生在教育内容的基础上进行注释。我们有一个课程集合，每个课程都有自己的HTML页面和内容，我们的web应用程序在iFrame中显示课程内容，iFrame顶部有一个画布。学生可以在画布上画画，在课程内容上方进行注释。到目前为止，这非常有效，除了当我们在不同的设备上重新绘制相同的注释时，有时这些注释与下面的内容不一致（假设您编写了一个答案，然后切换了设备，而该答案与正确的问题不一致）。我可以通过注释、保存然后更改Windows文本缩放，然后再次打开课程来重现此问题-注释图形似乎已移动。实际上，画布上的注释图形位于完全相同的位置，但其下方的内容已更改大小

---

有没有办法防止这种情况发生？我曾尝试将CSS与“文本大小调整：无”和“文本大小调整：100%”结合使用，但这似乎不起作用。

我能想到的唯一防弹方法是将课程文本作为图像提供。我认为您需要尝试不同的方法，例如，将注释锚定到原始文档中的特定DOM节点。