I am currently working on a client-side HTML website, and I would like to add an ASCII-based logo at the top of my page. I am embedding this logo in <pre>
tags to preserve whitespace, and it works as expected on desktop browsers. Also resizing in a desktop browser does not throw up any problems.
But when I access my website from an actual smartphone, the whitespace size seems to change and as a result, the ASCII-logo becomes unreadable. Pictures and actual code attached below.
View on desktop:
View on Samsung S8:
#boot-logo{
margin: 0!important;
width: 100vw!important;
font-family: monospace!important;
color: black!important;
font-size: 1rem!important;
}
<pre id="boot-logo">
██╗ ██╗██╗███╗ ██╗██████╗ ██████╗ ██╗ ██╗███████╗
██║ ██║██║████╗ ██║██╔══██╗██╔═══██╗██║ ██║██╔════╝
██║ █╗ ██║██║██╔██╗ ██║██║ ██║██║ ██║██║ █╗ ██║███████╗
██║███╗██║██║██║╚██╗██║██║ ██║██║ ██║██║███╗██║╚════██║
╚███╔███╔╝██║██║ ╚████║██████╔╝╚██████╔╝╚███╔███╔╝███████║
╚══╝╚══╝ ╚═╝╚═╝ ╚═══╝╚═════╝ ╚═════╝ ╚══╝╚══╝ ╚══════╝
██████╗ ███████╗████████╗██████╗ ██████╗ ██╗ ██╗ ██╗ ██████╗
██╔══██╗██╔════╝╚══██╔══╝██╔══██╗██╔═══██╗ ██║ ██║███║ ██╔═████╗
██████╔╝█████╗ ██║ ██████╔╝██║ ██║ ██║ ██║╚██║ ██║██╔██║
██╔══██╗██╔══╝ ██║ ██╔══██╗██║ ██║ ╚██╗ ██╔╝ ██║ ████╔╝██║
██║ ██║███████╗ ██║ ██║ ██║╚██████╔╝ ╚████╔╝ ██║██╗╚██████╔╝
╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═══╝ ╚═╝╚═╝ ╚═════╝
</pre>
question from:
https://stackoverflow.com/questions/65907934/html-pre-tag-contents-resizing-on-android 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…