CSS字体不是它应该是的（移动）答案

【问题标题】：CSS font not what it should be (mobile)CSS字体不是它应该是的（移动）
【发布时间】：2017-05-27 06:16:37
【问题描述】：

编辑：此问题出现在移动设备上或在开发工具中使用移动设备模拟器时

这对我来说是个很奇怪的问题。没有内联 CSS 或任何东西，只有一行 CSS 写着“font-size: 10px;”然而在 chrome 中，字体大小不是那样的。

它在 CSS 中显示字体为 10px，然后显示为 23.6。为什么？这是没有意义的。

代码：

body {
  font-family: 'Open-sans', sans-serif;
  width: 100%;
  background-color: var(--main-ac-color);
  webkit-font-smoothing: antialiased;
  font-size: 10px;
}

#overall {
  color: #313131;
  height: auto;
}

#about {
  z-index: 9;
  height: auto;
  min-height: 500px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow: auto;
}

.inner {
  display: block;
  max-width: 700px;
  margin: 0 auto;
}

#about .inner {
  display: block;
  width: 100%;
  max-width: none;
  min-width: none;
  margin: 0 auto;
}

#about-text {
  background-color: var(--main-ac-color);
  border-radius: 0 0 5px 5px;
  font-family: 'Cutive Mono', sans-serif;
}

<body>
  <div id="overall">
    <div id="about">
      <div class="inner">
        <h1>&mdash; About &mdash;</h1>
        <div class="boom">
          <div id="about-text">
            <p>
              Test Text
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

“boom”类用于滚动显示，没有属性

这是一个 JSFiddle。我能复制问题的最好方法是打开这个 JSFiddle，在 chrome 上打开开发人员工具，并将其更改为模拟移动设备（如 iPhone 6），然后蓝色“Hello World”框中的文本将大于 10px ，而其他文本（例如课程列表）将是 10 像素。 https://jsfiddle.net/jp3isme/os1385Lb/1/

【问题讨论】：

请向我们展示您的代码，而不仅仅是一张图片。请检查：How to create a Minimal, Complete, and Verifiable example
分享你的代码！
@PatrickMlr 我更新了帖子，但实际上没有代码可以显示。这就是我如此困惑的原因。
你想知道为什么“--关于--”这么大吗？
文件mobile.css（在屏幕截图中）是否包含其他字体大小？

标签： html css fonts

【解决方案1】：

现在我看到了问题所在。这是因为手机浏览器会自动改变字体的大小。

我不知道为什么这个问题只有在你使用“示例代码”时才会出现，但如果你只是用开发工具添加一些文本就不会出现。

如果你添加这个，你可以防止这种情况发生：

body, html {
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -o-text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

在此处查看 MDN：MDN: text-size-adjust

由于许多网页的开发并未考虑到移动设备，因此智能手机浏览器在显示网页的方式上与桌面浏览器不同。他们不是在设备屏幕的宽度上布置网页，而是使用比设备屏幕宽得多的视口来布置网页，通常是 800 或 1000 像素宽。要将宽布局映射回原始设备大小，浏览器要么只显示整个渲染的一部分，要么缩小视口以适应。

其他类似问题：

其他有用的网站：

Preventing Mobile Safari from upscaling font sizes

【讨论】：

谢谢！你知道为什么它只缩放那个部分的字体吗？网站上其他地方的字体大小保持为 10。该字体是特定的吗？
你在使用<p>标签，在其他部分使用table。