My issue is with preformatted text that displays correctly on desktop browsers but appears very small on mobile devices in comparison to regular text. Adjusting the size using ems or percent causes it to be too large on desktop screens. Despite searching extensively for a solution online, I haven't been successful so far. Can someone suggest the most effective way to address this problem? Additionally, I would love to know the reason behind why <pre> elements render so tiny in mobile browsers.
Here's an overview of the HTML structure without any CSS:
<html>
<body>
<div class="content">
<article>
<time datetime="2014-01-17 00:00:00 +0000 UTC">17 January 2014</time>
<pre><code>$ go run program.go # run a go program
$ go build package # build a go package; Cmake, Autotools, etc not required!
$ go install package # install a go package
$ go test package # test a go package
$ go get package # get any public package from the Internet
$ go fmt package # format a go package
</code></pre>
</article>
</div>
</body>
</html>