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

Question

我无法弄清楚为什么我正在制作的网站在移动设备上呈现得如此之小。为了找出原因，我设法用这个非常短的 html:

复制了这个问题

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

您可以看到 HTML here. This is how that example is rendered on my iPhone. This 的实时版本是如何使用相同的字体大小呈现相同的短语 ("No look behind the back catch")，除了在不同的站点中，红迪网。为什么我的 HTML 在手机上显示得这么小？

Answer 1

您需要添加视口元标记：

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

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

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

html

css

iphone

responsive