[BUG] 公式渲染在某些高分辨率屏幕(如ipad屏幕)上出现边缘模糊或锯齿

[Gypsophila-cx]

提交前检查

• 我已执行 hexo clean 并重新生成，问题仍然存在
• 我已更新到最新版本
• 我已确认同步了主题最新配置文件

Bug 描述

当前版本主题使用MathJax渲染得到的SVG在某些高分辨率屏幕（如ipad屏幕）上出现边缘模糊或锯齿，之前这个问题似乎并不存在。

复现步骤

输入一段MathJax代码进行渲染，在ipad屏幕上观察得到的网页，例如

$$
\bigoplus_{\alpha\in I} M_\alpha = \left\{(m_\alpha){\alpha\in I}: m\alpha\in M_\alpha, m_\alpha \neq 0\text{ for only finitely many }\alpha\right\},
$$

预期行为

得到的SVG图像应当具有足够光滑的边缘，不具有毛刺和锯齿。

截图

相关日志输出

No response

使用的浏览器

Chrome, Safari

操作系统

iOS

浏览器版本

No response

优先级

低（慢慢来）

其他信息

根据ChatGPT的回复，出现该问题可能的原因包括：

1. iPad 屏幕分辨率与渲染模式的兼容性：
   • MathJax 默认使用 SVG 或 HTML-CSS 渲染公式，SVG 渲染可能在某些高分辨率屏幕（如 Retina 屏幕）上出现边缘模糊或锯齿。
   • iPad 的分辨率和缩放比例与手机或电脑不同，可能触发 MathJax 的不同渲染行为。
2. CSS 缩放或布局问题：
   • 如果你的 Hexo 模板对公式的容器或字体大小进行了缩放，MathJax 的渲染比例可能不匹配，从而导致边缘粗糙。
3. MathJax 配置：
   • MathJax 的默认缩放或分辨率设置可能没有针对 iPad 优化。
4. 浏览器兼容性：
   • iPad 使用 Safari 浏览器，Safari 的 SVG 或字体渲染可能与其他设备上的浏览器不同，导致公式显示问题。