如何修复移动设备上 html 中不正确的 <pre> 格式？

Question

我在 <pre> 标签内的 html 文件中有一些 ascii 艺术。文本在桌面上以适当的间距正确显示，但在移动设备上查看时格式会变得混乱。我正在使用等宽字体系列，尝试换成其他字体，但结果相同。

截图
桌面：webpage when viewed on desktop
手机：webpage when viewed on mobile

我用 Google chrome 和 Brave 浏览器检查过，两者显示相同的结果。

如果有人想自己查看，该页面托管在 ankushKun.github.io 上。

HTML : https://pastebin.com/E89hmN3i
CSS : https://pastebin.com/pkuURxsQ
html 页面使用 javascript 从 .txt 文件加载额外的 html，此文本文件包含 ascii 艺术。任何具有 include-html="file-path" 的 html 标签都将替换为该文件的内容。
文本文件：https://pastebin.com/WkDTMNwJ

我试过将 ascii 直接放在 .html 页面中，但结果相同，所以将 txt 文件加载到 html 中不是问题，但方法有问题我认为文本是在移动设备上格式化的。

例如

 ██████  ██ ████████ ██   ██ ██    ██ ██████ 
██       ██    ██    ██   ██ ██    ██ ██   ██
██   ███ ██    ██    ███████ ██    ██ ██████ 
██    ██ ██    ██    ██   ██ ██    ██ ██   ██
 ██████  ██    ██    ██   ██  ██████  ██████

谢谢。

Answer 1

一种方法可以measure your pre and if it wider then screen width use css transform to scale它。

let art = document.querySelectorAll('pre')[0];
let artWidth = window.getComputedStyle(art).getPropertyValue('width');
if (window.screen.width < parseFloat(artWidth)) {
  art.setAttribute('style', 'transform: scale(0.5)');
}

<pre>
 ██████  ██ ████████ ██   ██ ██    ██ ██████ 
██       ██    ██    ██   ██ ██    ██ ██   ██
██   ███ ██    ██    ███████ ██    ██ ██████ 
██    ██ ██    ██    ██   ██ ██    ██ ██   ██
 ██████  ██    ██    ██   ██  ██████  ██████ 
</pre>

Answer 2

对于未来的读者，问题出在我使用的 ASCII ART 上，它在 android 上呈现不正确，只需将 ASCII 更改为其他内容并检查它是否呈现正确

如何修复移动设备上 html 中不正确的 <pre> 格式？

How to fix improper <pre> formatting in html on mobile device?

html

css

ascii

pre