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

Question

我在 html 文件中有一些 ASCII 艺术，位于

<pre>

标签内。 文本在桌面上以适当的间距正确显示，但在移动设备上查看时格式会变得混乱。 我正在使用等宽字体系列，尝试更改为其他字体，但结果相同。

截图
桌面：
手机：

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

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

HTML：https://pastebin.com/E89hmN3i
CSS：https://pastebin.com/pkuURxsQ
html 页面使用 javascript 从 .txt 文件加载附加 html，该文本文件包含 ascii art。任何具有

include-html="file-path"

的 html 标签都将替换为该文件的内容。
TXT：https://pastebin.com/WkDTMNwJ

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

例如

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

谢谢你。

Answer 1

一种方法可以是测量您的

pre

，如果它更宽，则屏幕宽度使用

css

变换缩放它。

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 更改为其他内容并检查它是否正确渲染

Answer 3

很抱歉在这里滥用了SO功能，但我还没有足够的声誉来发表评论，所以我必须将其发布为“答案”。

我不明白公认的答案：“问题在于我使用的 ASCII ART，它在 Android 上渲染不正确，只需将 ASCII 更改为其他内容......”

这是否意味着只需使用图像即可？ 毕竟，unicode 块字符并不是真正的 ASCII...

我在这里面临同样的问题...unicode 块和框字符的宽度都相同（很好），但没有一个 unicode 空白似乎具有完全相同的宽度。 （我尝试以这种方式显示二维码，因此空白确实需要完全空白，并且它们需要与块和框字符一致。