css 如何修复< pre>移动终端上的HTML格式不正确？

yhived7q 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(86)

我有一些ascii艺术在一个html文件内是<pre>标签。文本是正确显示在桌面上与适当的间距，但格式得到混乱时，在移动的查看。我正在使用单空间字体家族，尝试更改为其他字体，但他们有相同的结果。
截图
台式机：webpage when viewed on desktop
移动的：webpage when viewed on mobile
我已经检查了谷歌Chrome和Brave浏览器，两者都显示相同的结果。
如果有人想自己查看该页面，则该页面托管在ankushKun.github.io上。
超文本标记语言：https://pastebin.com/E89hmN3i
CSS：https://pastebin.com/pkuURxsQ
html页面使用JavaScript从.txt文件加载其他html，此文本文件包含ascii art。任何包含include-html="file-path"的html标记都将被替换为该文件的内容。
文本：https://pastebin.com/WkDTMNwJ
我试过把ascii直接放在.html页面中，但结果是一样的，所以这不是把txt文件加载到html中的问题，而是我认为移动的上的文本格式有问题。
例如

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

字符串
谢谢

css

来源：https://stackoverflow.com/questions/69792883/how-to-fix-improper-pre-formatting-in-html-on-mobile-device

2条答案

按热度按时间

v64noz0r1#

一种方法可以是measure你的pre，如果它更宽，那么screen width使用csstransform 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)');
}

个字符

赞(0）回复(0）举报 2024-01-09

wkyowqbh2#

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

赞(0）回复(0）举报 2024-01-09