Неожиданное поведение размера шрифта абзацев внутри flexbox - PullRequest
Новая
       11

Неожиданное поведение размера шрифта абзацев внутри flexbox

0 голосов
/ 29 марта 2019

В flexbox есть неожиданное поведение абзацев. Это происходит только на мобильных устройствах Chrome, когда вы проверяете «запросить сайт рабочего стола» или когда вы находитесь в инструментах разработчика в Chrome, включаете «панель инструментов устройства» и устанавливаете размер устройства на что-то маленькое (например, 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>

Ожидаемое поведение: все размеры шрифта должны быть одинаковыми. Это явно не тот случай, см. Скриншот.

Incorrect font-size

Тем не менее, при удалении одной строки из абзаца '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>

Correct behaviour

Что-то не так в этом коде, это ошибка браузера или что-то в спецификации html / css? Я проверял это только в Chrome на Android и Chrome на Windows 10.

1 Ответ

1 голос
/ 29 марта 2019

использовать текст-размер-настроить 

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