Question

这是我的代码，请在chrome devtool中打开并打开移动模拟器：

＆＃13;

* {
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
  width: 100%;
}

#app {
  height: 100%;
  background-color: lightcyan;
}

#wrapper {
  overflow: auto;
  background-color: lightblue;
}

div {
  font-size: 24px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=750,maximum-scale=1.2,user-scalable=no">
  <title>Title</title>

</head>

<body>
  <div id="app">
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div id="wrapper">
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
    </div>
  </div>
</body>

</html>

＆＃13;

screenshot

一页中的一个字体大小有两个外观，它很奇怪。我找到的一些方法可以使字体大小表现相同：

从height:100%

#app

删除一些div元素（例如，在app中的div中保留两个，在wrapper中保留两个div）
将width的{{1}}属性更改为viewport
删除device-width

overflow

但这些方法无法解释我的问题。

Answer 1

您的viewport元标记有点奇怪：

<meta name="viewport" content="width=750,maximum-scale=1.2,user-scalable=no">

虽然它包含user-scalable=no，但它包含maximum-scale=1.2，width设置没有单位（px）且没有initial-scale设置。我认为这可能会导致某些浏览器出现奇怪的行为，而这些行为无法正确解释。

一页中的元素并设置一个字体大小但显示不同？

1 个答案: