如何修复移动端HTML中<pre>标签格式错乱导致ASCII艺术字显示异常问题

核心原因 #

该问题由移动端浏览器默认渲染规则导致：一是部分移动端等宽字体未严格实现字符等宽，二是浏览器默认会自动调整文本大小、启用折行，破坏原有的字符间距对齐。 #

修复步骤 #

1. 配置专用CSS规则 #

给包裹ASCII艺术字的<pre>标签添加专属类名（比如ascii-art），写入以下样式覆盖默认规则：

pre.ascii-art {
  /* 保留原文本换行规则，禁止自动折行 */
  white-space: pre;
  overflow-x: auto;
  
  /* 关闭移动端自动字号缩放，避免字符宽度被篡改 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* 关闭连字、固定字符间距，强制等宽 */
  font-variant-ligatures: none;
  letter-spacing: 0;
  word-spacing: 0;
  
  /* 跨平台兼容等宽字体栈，优先调用系统原生等宽字体 */
  font-family: Consolas, "Liberation Mono", Menlo, Courier, "Courier New", monospace;
  
  /* 关闭渲染优化，避免浏览器自动调整字符间距 */
  text-rendering: geometricPrecision;
}

2. 校验viewport配置 #

确保HTML头部的viewport元标签配置正确，避免页面整体缩放异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 可选：固定最小宽度适配 #

如果你的ASCII艺术字宽度固定，可以在外层容器添加最小宽度规则，避免移动端视窗过窄挤压内容：

.pre-container {
  min-width: 450px; /* 数值根据你的ASCII艺术字实际宽度调整 */
  overflow-x: auto;
}

内容的提问来源于stack exchange，提问作者Ankush