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

时间：2017-06-03 14:20:50

标签： css google-chrome mobile

这是我在桌面视图和移动视图中测试font-size的代码。我使用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 tag font-size在桌面上是18px，但在iphone5视图中更改为51px。当我调整浏览器窗口的宽度时，字体大小仍为18px，但切换到iPhone5视图时，字体大小更改为51px。

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

enter image description here

这是桌面计算字体大小

enter image description here

这是怎么发生的？

如果您访问www.wordpress.com，则在Chrome设备模拟器中查看时，其计算字体大小仅会从20px更改为16px。为什么？

1 个答案:

答案 0 :(得分：1)

尝试将其放在您的头部<meta name="viewport" content="width=device-width">。它基本上迫使移动浏览器以其自身屏幕大小的宽度呈现页面。 Here是一篇文章，详细解释了它的作用。

相关问题
最新问题