У смартфона боковые поля намного больше, чем у ПК

Question

На моем сайте:

.div1 {
    display:flex;
    flex-direction:column;
    align-items:center;
}
h1 {
    font-weight:normal;
    font-size:50px;
    font-family:Sans-Serif;
    margin:0.5em;
    color:#ccc;
}

.div1 - это элемент div, который содержит все остальные элементы на странице. Первое, что есть внутри, это название:

<h1>B I O D I V E R S U S</h1>

В моем компьютере, когда я изменяю размер браузера, чтобы он стал очень узким (имитирует экран смартфона), только несколько букв переходят на следующую строку. Боковые поля столь же малы, как нижнее и верхнее поля (0,5 em).

Однако в моем смартфоне боковые поля намного больше, чем нижнее и верхнее поля, так что есть место для всех букв, и все же некоторые из них переходят на вторую строку (та же проблема в абзацах ниже).

Что происходит?

Answer 1

Для правильной работы веб-страниц на мобильных устройствах необходим следующий метатег.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Короче говоря, если ширина экрана мобильного устройства составляет 640 пикселей, страницы могут отображаться с виртуальным окном просмотра размером 980 пикселей, а затем он будет уменьшен до размера 640 пикселей.

Чтобы понять, почему это так, вы можете прочитать об этом здесь и здесь .