text is tiny in mobile browsers; how can I fix it?

Question

I have preformatted text, which appears fine in the desktop browser, but on mobile everything is tiny relative to the normal text. If I change the size using ems or percent, it scales too large on desktop. I've Googled all over for solutions, but no luck so far. What's the best method for fixing this? Bonus points for explaining why <pre> renders so small in mobile browsers.

enter image description here

Here's the jist of the HTML; there is no 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>

Can you show your code please (HTML/CSS)? That way it will be easier to understand your issue :) — eggy, Nov 28 '14 at 04:22
The code posted does not reproduce the issue in my mobile at all. Identify the devices and browsers you tested and check that the code posted *as such* actually creates the problem. — Jukka K. Korpela, Nov 28 '14 at 05:21
The OP is right. Look at https://horstmann.com/private/pretextistiny.html in Firefox on Android. The `pre` contents is teensy tiny. Why??? View source. No CSS. Just `` and ``. With desktop browsers, no problem. — cayhorstmann, Mar 23 '23 at 17:30

score 1 · Answer 1 · answered Dec 22 '22 at 00:00

1

adding this meta line fixed it for me

  <meta name="viewport" content="width=device-width, initial-scale=1">

answered Dec 22 '22 at 00:00

Nx2

19
3

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 22 '22 at 21:52

score 1 · Answer 2 · answered Mar 25 '23 at 06:11

1

Style the pre tag with white-space: pre-wrap;. Then the size is as expected with mobile browsers. Source

answered Mar 25 '23 at 06:11

cayhorstmann

3,192
1
25
17

score 0 · Answer 3 · answered Nov 28 '14 at 04:35

0

You could use CSS3 media queries to differentiate based on screen width:

<style>
@media screen and (max-width: 700px) {
  pre {
    font-size: 120%;
  }
</style>

<pre>HEll yeah all these spaces
    and stuff</pre>

answered Nov 28 '14 at 04:35

Scott Weaver

7,192
2
31
43

Such media queries do not test for mobile vs. other browsers, as you can see e.g. by testing on a desktop browser using a window narrower than 700 pixels. – Jukka K. Korpela Nov 28 '14 at 05:13
that's why they are useful, it's not really about the browser. Mobile browsers are used on phones, not on desktops. – Scott Weaver Nov 28 '14 at 05:16
1

The question was not about differentiating based on screen width (which is BTW not what your code does; it differentiates by viewport width). – Jukka K. Korpela Nov 28 '14 at 05:23
Feel free to provide an answer that's based on querying the User-Agent, Captain Literal. – Scott Weaver Nov 28 '14 at 05:36

score 0 · Answer 4 · answered Nov 28 '14 at 04:35

You can fix that using @media queries of CSS3.

Example:

@media screen and (min-width: 320px) and (max-width: 420px){ /* set appropriate sizes here */
  pre{
    font-size: 20px; /* or whatever size that you want, you can also use % as suggested by @sweaver2112 */
  }
}

Learn about @media in CSS3 | MDN

text is tiny in mobile browsers; how can I fix it?

4 Answers4