为什么这个小的HTML示例在我的手机上呈现得这么小？

Question

我很难弄清楚为什么我制作的网站在手机上会变得如此之小。为了找出原因，我设法用这个非常短的html复制了这个问题：

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

您可以看到该HTML here的实时版本。This就是这个例子在我的iPhone上呈现的方式。Reddit是相同的短语("No look back the back catch")是如何用相同的字体大小呈现的，除了在不同的网站This中。为什么我的HTML在手机上会变得这么小？

Answer 1

您需要添加一个viewport meta标记：

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

这放在文档的头部：

<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>