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

Question

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

* {
  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;
}

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

screenshot

一页一个字号有两种样子，好奇怪。我发现有一些方法可以使字体大小表现相同：

从 #app

height:100%

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

overflow

但是这些方法不能解释我的问题。

Answer 1

TL;DR：一些移动浏览器（和 Chrome 检查器）在认为可以安全地这样做时会自动缩放文本。 overflow:auto; 就是其中之一。要防止这种行为，请使用 -webkit-text-size-adjust: 100%;

根据drafts.csswg.org：

One common problem with this type of interaction occurs when the user wants to read a large block of text. It might be that a block of text within this desktop-formatted page might be laid out so that when the user zooms in so that the text is large enough to read, each line of text is wider than the display on the small device. This means the user needs to scroll side to side to read each line of text, which is a serious inconvenience to the user.

One way for software that displays Web pages or other CSS-formatted content on a mobile device is to make some of the text larger so that this problem does not occur. The goal of this enlargement is to make the text big enough so that when the block it is in is scaled to the width of the display, the text is large enough to read. At the same time, this needs to be done with minimal disruption to the overall design of the page.

Mozilla also explains移动端文字大小调整：

Because many web pages have not been developed with mobile in mind, smartphone browsers differ from desktop browsers in the way they display web pages. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually 800 or 1000 pixels wide. To map the wide layout back to the original device size, the browser either shows only part of the whole render, or the viewport is scaled down to fit.

Because text that has been scaled down to fit a small screen is very small, many mobile browsers apply a text inflation algorithm to make the text larger and more readable. When an element containing text uses 100% of the screen's width, its text size is increased until it reached a readable size, but without modifying the layout.

According to Mozilla, overflow: auto; 建立新的块格式化上下文：

The overflow CSS property specifies whether to clip content, show scrollbars, or display overflowing content when it is too large for its block-level container.

因为 overflow:auto; 正在脱离其父上下文，一些移动浏览器（显然 Chrome 的网络检查器也是如此）可以自由应用移动文本大小调整。此行为 can be 通过使用禁用：

body, html {
    -webkit-text-size-adjust: 100%;
}

#app div 及其子项（溢出的 #wrapper div 除外）从视口元继承 750px 宽度。

Answer 2

您的 viewport 元标记有点奇怪：

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

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

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

Elements in one page and set one font-size but display differently?

html

css

viewport