CODEWITHSUNDEEP
responsive-designfont-sizefirefox-os
Christoph85LE
Christoph85LE

Reputation: 85

How to manage varying standard font size in FirefoxOS browser?

I'm now learning about adaptive and responsive design to apply this for Firefox Os Web Apps later. I start with simple HTML pages. My idea is to respond the design to the standard font size of the browser so that my app is agnostic to the actual resolution. But I observed a strange behavior: The standard font size depends on how much content the page contains.

To show this I prepared the following two examples

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8" /><title>Unnamed</title></head>
  <body>
    <h1>A heading</h1>
    <p>much more text. Bla blabla blablabla. Bla blabla blablabla. Bla blabla
      blablabla Bla blabla blablabla. Bla blabla blablabla. Bla blabla blablabla.
      Bla blabla blablabla [...]
    </p>
  </body>
</html>

and

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8" /><title>Unnamed</title></head>
  <body>
    <h1>A heading</h1>
    <p>view text.
    </p>
  </body>
</html>

and this is what the browser shows

https://i.sstatic.net/UxMFP.png

https://i.sstatic.net/LAMC9.png

My question: What is the reason for these differences and how can I make the tiny text version to show regular, readable size?

update: Oh, and I tried it on ZTE Open C and Alcatel One Touch Fire E. The platform is Firefox OS 1.3

Upvotes: 1

Views: 131

Answers (1)

Jan Jongboom
Jan Jongboom

Reputation: 27313

It's the zoom level that differs, the zoom level gets adjusted based on the amount of content on the page. For this you can use following meta tag:

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

Another trick to dealing with font sizes in Firefox OS. Add the following CSS to set a base font-size:

html, body {
  font: 10px sans-serif;
}

Now you can set the font size of every element in rem (1 rem is = 10px):

#someElement {
  font-size: 1.5rem;
  width: 4rem; /* also works on other properties */
}

All set. Now the beauty of this is that on bigger devices and you want to scale up the design, you can do so from JavaScript:

document.documentElement.style.fontSize = '12px';

And all elements are shown at 120% size.

Upvotes: 1

Related Questions