微信公众号编辑公式常见技术问题：公式显示模糊或错位

Question

在微信公众号编辑数学公式时，常出现公式显示模糊或错位的问题。主要原因是直接粘贴LaTeX公式或使用截图方式插入时，未适配移动端的高分辨率屏幕，导致图片模糊；而通过富文本编辑器渲染的公式，因CSS样式兼容性差，易发生排版错位。此外，部分第三方公式插件与公众号后台不兼容，进一步加剧显示异常。

Answer 1

微信公众号数学公式显示模糊与错位问题的深度解析

1. 问题背景与现象描述

在微信公众号内容创作中，尤其是涉及高等数学、物理或工程类文章时，数学公式的准确呈现至关重要。然而，许多作者在编辑过程中常遇到以下两类典型问题：

• 图像模糊：通过截图方式插入LaTeX渲染后的公式，在高分辨率移动端设备上显示模糊。
• 排版错位：使用富文本编辑器直接嵌入MathJax或KaTeX等引擎生成的HTML+CSS公式，因样式未适配微信客户端而发生错位、换行异常。

此外，部分第三方插件（如某些Markdown转微信工具）内置的公式渲染模块与微信后台解析机制不兼容，导致最终发布后公式丢失或变形。

2. 技术成因分析

从底层技术角度看，上述问题可归结为三个层面：

1. 分辨率适配缺失：截图方式导出的PNG/SVG图像通常以标准DPI（96dpi）保存，未考虑Retina屏的@2x/@3x需求，导致像素拉伸。
2. CSS兼容性断裂：微信公众号使用的WebView内核对CSS Flex、Inline-Block及vertical-align支持有限，尤其在iOS与Android间存在差异。
3. DOM结构被清洗：微信后台会自动过滤含有<script></script>