Viclib Viclib - 2 months ago 6
CSS Question

Why this small HTML example renders so small on my phone?

I'm having trouble figuring out why the site I'm making is rendering so small on the mobile. In order to figure out why, I've managed to replicate the problem with this very short html:

<html>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>


You can see the live version of that HTML here. This is how that example is rendered on my iPhone. This is how the same phrase ("No look behind the back catch") is rendered with the same font-size, except in a different site, Reddit. Why is my HTML rendered so small on mobile phones?

Answer

You need to add a viewport meta tag:

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

This goes in the head of the document:

<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div style="font-size: 14px">
      No look behind the back catch
    </div>
  </body>
</html>
Comments