Html Question posted in
Some basic documentation can be found here.

Html – How to make Android system font size affect my page?

I know that system font size is supposed to update font size of the HTML tag, which is 1rem in CSS. So I was expecting that if I do not touch HTML font and just use REM units across my website — it would be affected by this setting. However this doesn’t seem to work for me on Xiaomi 12T with latest MIUI. What is the most weird is that I noticed that footer size on the main page of Wikipedia is affected by system font size for me:
https://www.wikipedia.org

I tried recreating the styles they use but it still did not help and I couldn’t find any real answer as to how to enable this, almost as if it should work out of the box.

EDIT:

I have created this minimal piece of HTML that kind of works, but only for text, the DIV that is sized in REMs does not change its size:

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
      html {
        font-size: 100%;
      }
      div {
        width: 3rem;
        height: 3rem;
        background: red;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Test</h1>
      <section>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.</section>
      <div></div>
    </main>
  </body>
</html>

Moreover, if I cut section content in half (just remove half of the text) it stops scaling. This is driving me crazy, how can this be?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, apparently it's a Chrome for Android bug as it works properly on Firefox and on iOS (given I add font: -apple-system-body; which I believe is required for it to work on iOS). Filed it here: https://issues.chromium.org/issues/375209519


  2. 0

    You’ve not set a font-size on the root element, so you’ll get the browser defaults instead. Set the font-size:

    html { font-size: 100%; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search