HTML <pre> tag contents resizing on android

I've stumbled upon your question when trying to solve basically the same thing, in my case, it was a retro-dialog from the DOS era:

<pre>
+-------------------------------------+  
|                                     |##
|     A message from the past...      |##
|                                     |##
+-------------------------------------+##
  #######################################

╔═════════════════════════════════════╗  
║                                     ║██
║     A message from the past...      ║██
║                                     ║██
╚═════════════════════════════════════╝██
  ███████████████████████████████████████
</pre>

And whilst on the desktop browser even in the mobile view, I've got exactly what I expected, Chrome, Vivaldi, and Firefox on Android rendered the second box misaligned:

Screenshot of the example in Vivaldi on Android

Finally, I've remembered that the way the text is rendered is that when a selected font is missing a given glyph a different font is used as a replacement for that particular character (and it was actually then when I've added the version containing only the ASCII characters to compare, which produced a nicely aligned box). I've then connected the remote DevTools to see what it will tell me about the fonts used, and the result for that example <pre> is:

Droid Sans Mono—Local file(361 glyphs)
Noto Sans Symbols—Local file(131 glyphs)

The semi-graphics frame length is 39 characters, so 78 for the top and bottom frame, 3 times 2 vertical frame symbols and 2 shadow symbols, two shadow symbols next to the bottom frame, and 39 shadow symbols beneath, giving a total count of 131. The boxes are 41x6, so given the fact that the spaces inside them are rendered in the preformatted block, a total of 491 characters to be rendered, and 491 minus 131 is 361.

So all the ASCII characters have been rendered using Droid Sans Mono, a monospace font. But the Unicode box-drawing characters have been rendered using a different font, extending the lines containing them. I.e. it's not the whitespace that is being resized, it's the drawing characters that are of a different size than the rest.

A possible fix is to use a monospace font that contains all the glyphs needed, e.g.:

<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/dejavu-sans-mono" type="text/css">
<style>
pre {
  font-family: DejaVuSansMonoBold;
}
</style>

And the result is:

Screenshot of the version using a downloadable font in Vivaldi on Android

Unfortunately, in my scenario, I consider using an external font an overkill. But maybe it will work for you.