Минималистический сайт: текст заголовка flexbox вертикально центрирован на Chrome настольном компьютере, но не Chrome на мобильном. Почему? - PullRequest
Новая
       49

Минималистический сайт: текст заголовка flexbox вертикально центрирован на Chrome настольном компьютере, но не Chrome на мобильном. Почему?

1 голос
/ 27 февраля 2020 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

    <link href='https://fonts.googleapis.com/css?family=Niramit' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div id="main">
        <div class="bar">
            <div id="title" class="header-text">title</div>
        </div>
    </div>
</body>
</html>

https://jsfiddle.net/uey85nbj/

Chrome Рабочий стол: 27 пикселей выше и 29 пикселей ниже

enter image description here

Chrome Мобильный: 40 пикселей выше и 31 пиксель ниже

enter image description here

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

Как предположил @Ahil Aravind, проблема в шрифте. Вот изображение без специального шрифта.

enter image description here

0 голосов
/ 27 февраля 2020

Если вы поместите цвет фона в элемент div, содержащий ваш текст, вы получите представление о том, что происходит (и вот как это выглядит на настольных компьютерах Firefox и Chrome для меня, поэтому я не буду не знаю, как вы получили свой первый скриншот):

green background on text showing how the text element is framed in its parent

Этот div очень хорошо центрирован по вертикали, но поскольку ваш текст написан строчными буквами, оптическое выравнивание выключено. Шрифты не всегда занимают место так, как вы ожидаете, отчасти потому, что большинство символов шрифта не занимают все пространство сверху и снизу. То, как текст взаимодействует с пространством, будет меняться от шрифта к шрифту. Измените «title» на «TITLE» и посмотрите, как оно выглядит.

В этом вам может помочь манипулирование с высотой строки, или вы можете сделать position: relative; top: -2px, или transform: translateY(-2px), или что бы то ни было больше полезно.

Я бы порекомендовал уйти от мм как единое целое; пиксели, ems / rems, проценты и единицы просмотра лучше отображают, как вещи измеряются на странице.

...