Прыгает страница сайта. Исправляем.

(для начинающих)

Наиболее заметны такие прыжки по размеру текста. Когда страница открывается, то текст большего размера. Начинаешь страницу прокручивать вниз, текст становится меньше. Характерны такие прыжки для мобильных браузеров Chrome, Yandex. Возможно, для других браузеров. Не проверял.

Браузер Edge для настольного компьютера с Windows 10 и мобильный Edge для Android, таких прыжков не делает.

Причина.
В коде страницы для какого-то теге не указан вертикалный размер height. Ширина, то есть размер width, может быть указан или не указан. Для прыжков это значения не имеет. Далее, более подробно.

Привожу код реальной прыгающей страницы сайта NewLAN60.ru Она совсем немного упрощена. Уменьшено количество текста, убраны кнопка скачивания документа PDF и 2 счётчика посещений от Yandex и Google. Чтобы не мешали пониманию.

Файл html.

<!DOCTYPE html> 
<html lang="ru">

<title>Русское географическое общество. История и современность.</title>
<meta charset="utf-8">
<meta name="description" content="18 августа 1845 года было учреждено Императорское русское географическое общество. Учредители Фёдор Петрович Литке, Семёнов-Тян-Шанский Пётр Петрович.">
<meta name="keywords" content="Русское географическое общество, экспедиции, исследования, морские путешествия">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/lanstyle20.css">
<link rel="icon" type="image/svg+xml" sizes="any" href="../favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">

</head>

<body>

<header>

<div class="hea1"><b>NewLAN60<span class="hea2">.ru</span></b></div>
<div class="hea3"><aside><b>Добро пожаловать</b></aside></div>

</header>

<main>

<form>

<a href="../index.html#a1" target="_blank"><aside>Главная</aside></a>

</form>

<h1>Русское географическое общество<span class="span1">.</span> История и современность<span class="span1">.</span></h1>
<p>18 августа 1845 года было учреждено Императорское русское географическое общество. Замечательные имена среди его учредителей и основателей: Фёдор Петрович Литке, Семёнов-Тян-Шанский Пётр Петрович, географы, общественные деятели Владимир Иванович Даль, Владимир Одоевский. Люди, которые были заинтересованы в том, чтобы российская наука заняла достойное место в мировой. Адмирал Фёдор Петрович Литке считал, что главным предметом Русского географического общества должно быть возделывание географии России. Пётр Петрович Семёнов-Тян-Шанский называл общество свободной и открытой для всех, кто проникнут любовью к родной земле и глубокой несокрушимой верой в будущее русского государства и русского народа, корпорацией. Очень любопытно, что устав географического общества, устав, который был принят в 1845 году и написан Фёдором Петровичем Литке в основном. Этот устав практически не изменился даже в советское время и сейчас. Все основные положения остались такими же, какими были почти 200 лет назад. Это все потому, что общество было создано, как важная российская организация, объединяющая сначало конечно элиту. Уже названы фамилии. В том числе Владимир Иванович Даль, который сыграл очень интересную роль при создании общества.</p>

</main>

<footer>

<span id="foo3">Персональный сайт. Работает с 1 марта 2019.</span>

</div>

</footer>

</body>
</html>

Файл lanstyle20.css

/* "20" страница: Russkoye-geograficheskoye-obshchestvo-Istoriya-i-sovremennost. */
body {font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; margin: 0px; display: flex; min-height: 100vh; flex-direction: column;}

/* Шапка */
header {min-height: 3em; font-size: 2em; background-color: Cyan; color: Red; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.hea1 { margin-left: 1.4em;}
.hea2 { color: #fe9025;}
.hea3 { margin: 0em 1.4em;}

/* Кнопка Главная */
form { text-align: right; margin-top: 2em;}
form a {display:inline-block;
background-color: #fe9025;
color: Blue;
border-radius: 10px;
padding: 0 30px;
border: 2px solid #C0C0C0;
text-decoration:none;}

/* Основной текст */
main {flex: 1; padding: 0em 2.8em 5em;}
h1 {text-align:center; margin-bottom:0;}
.span1 {font-weight:normal;}

/* Подвал */
footer {background-color:#C41E3A; text-align:center;}
#foo1 {display:inline;}
#foo2 {line-height:5.2em;}
#foo3 {display:inline-block; /* Делаем блок центрируемым */
vertical-align:middle;} /* ... по вертикали */

Теперь о странице, которая не будет прыгать. В файл html не вносим никаких изменений. Файл lanstyle20.css будет немного другим.

Обновлённый файл lanstyle20.css

/* Основной текст */
main {flex: 1; padding: 0em 2.8em 5em; height: 100%;}
h1 {text-align:center; margin-bottom:0;}
.span1 {font-weight:normal;}

Добавлено только height: 100%; для тега main и скачки прекратились. Это на сайте NewLAN60.ru Для вашей страницы сайта надо искать в каком теге не хватает размера height.

Несколько простых советов.

1. Не запрещайте масштабирование страницы.
<meta name="viewport" content="width=device-width, user-scalable=no">
Запрет не поможет, а на смартфона мелкие детали толком не рассмотришь.
2. Не загружайте сторонние шрифты. Они используются, чтобы страница выглядела более красиво. В конкретном случае задача другая и шрифты не помогут.
3. Не используйте технологию Preload. Например, для предварительной загрузки своих фото с сервера или предварительной загрузки тех же сторонних шрифтов. Технология не поможет. Подробнее о Preload можно почитать на https://newlan60.ru/page4/Primery-iz-spetsifikatsii-Preload.html
4. Когда внесли изменение в файл, зайдите настройки/приложения/браузер/хранилище и удалите кеш браузера. При повторном, частом открытии одного и того же файла, браузер может брать старый вариант файла из кеша. Это сбивает.

Удачи в исправлении.

Berendej - автор