HTML <pre> tag contents resizing on android

Question

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

Answer 1

Waitting for answers