Chrome iPhone5 视图中的字体大小更改答案

【问题标题】：font-size changes in Chrome iPhone5 viewChrome iPhone5 视图中的字体大小更改
【发布时间】：2017-11-04 19:22:12
【问题描述】：

这是我在桌面视图和移动视图中测试字体大小的代码。我使用 Chrome Inspector 在桌面视图和 iphone5 视图之间切换。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>html5 font test</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    body, html {
      font-size: 18px;
    }
    p {
      font-size: 1em;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a arcu sed massa finibus dapibus ac sed erat. Phasellus eget magna lectus. Curabitur lectus augue, porta ac faucibus a, efficitur et mi. Phasellus id purus maximus sem placerat varius et luctus eros. Donec maximus odio at erat facilisis, id lacinia erat imperdiet. Cras lacinia orci sed nisl gravida vestibulum. Aliquam dignissim nisl ut auctor rhoncus. Nam congue, diam quis ultrices iaculis, mi purus mollis libero, sit amet egestas nulla justo vel dui. Ut pharetra bibendum lorem, eget rutrum mi scelerisque id. Nullam feugiat condimentum cursus. In at fringilla augue.</p>

</body>
</html>

问题是 p 标签字体大小在桌面上是 18px，但在 iphone5 视图中变为 51px。当我调整浏览器窗口的宽度时，font-size 保持 18px，但是当切换到 iPhone5 视图时，font-size 变为 51px。

这是 Chrome iPhone5 移动视图计算的字体大小

这是桌面计算的字体大小

这是怎么发生的？

如果您访问 www.wordpress.com，在 Chrome 设备模拟器中查看时，它们计算出的字体大小仅从 20 像素变为 16 像素。为什么？

【问题讨论】：

标签： css google-chrome mobile

【解决方案1】：

试着把它放在你的头部<meta name="viewport" content="width=device-width">。它基本上强制移动浏览器以它自己的屏幕尺寸的宽度呈现页面。 Here 是一篇文章，它更详细地解释了它的作用。

【讨论】：

非常感谢！它可以工作，在 iPhone5 视图中字体大小保持 18 像素，但是为什么以它自己的设备宽度 320 像素进行渲染会阻止计算出的字体大小发生变化？
我认为这是因为默认情况下移动设备会尝试通过调整字体大小来弥补对移动设备不友好的网站，例如使文本更易读。