flexbox 中段落字体大小的意外行为

Question

弹性框内的段落出现一些意外行为。这只会在 chrome 移动设备上发生，当检查 'request desktop site' 或当您在 chrome 中的开发者工具中并打开 'device toolbar' 并将设备尺寸设置为较小的尺寸（例如 320x500 ). 例如，请参见以下 html:

<html>

<head>
  <meta name="viewport" content="width=980">
  <style>
    p {
      border: solid red 1px;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <p>These should be the same size</p>

  <div style="display: flex; flex-wrap: wrap; justify-content: center;">
    <p>These should be the same size</p>
    <div style="width: 830px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum. Mauris convallis sagittis ornare.</p>
    </div>
  </div>
</body>

</html>

预期行为：所有字体大小应相同。显然不是这样，请看截图。

然而，当从 'Lorem ipsum' 段落中删除一行时，所有内容都变得相同的小尺寸（这也是我在上一个示例中所期望的）。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum.</p>

此代码是否有问题，这是浏览器错误还是 html/css 规范中的某些内容？我只在 android 的 chrome 和 windows 10 的 chrome 中测试过这个。

Answer 1

使用文本大小调整

<html>

<head>
  <meta name="viewport" content="width=980">
  <style>
    p {
      border: solid red 1px;
      font-size: 16px;
       text-size-adjust:100%;
    }
  </style>
</head>

<body>
  <p>These should be the same size</p>

  <div style="display: flex; flex-wrap: wrap; justify-content: center;">
    <p>These should be the same size</p>
    <div style="width: 830px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor purus. Etiam ut hendrerit erat. Fusce finibus faucibus velit ac fringilla. Praesent sollicitudin arcu non eleifend rutrum. Mauris convallis sagittis ornare.</p>
    </div>
  </div>
</body>

</html>

flexbox 中段落字体大小的意外行为

Unexpected behaviour of font-size of paragraphs inside a flexbox

html

css

font-size

flexbox