<meta name="text-scale">

Значение text-scale атрибута name элемента <meta> позволяет включить масштабирование начального значения font-size корневого элемента <html> страницы пропорционально настройкам масштаба текста на уровне ОС и браузера.

Примечания по использованию

Элемент <meta name="text-scale"> имеет следующие дополнительные атрибуты:

content

Задаёт поведение включения масштабирования font-size. Значение представляет собой ключевое слово, которым может быть одно из следующих:

scale

Включает масштабирование начального значения font-size корневого элемента <html> страницы пропорционально настройкам масштаба текста на уровне ОС и браузера. Также это заставляет браузер отключить существующие механизмы и эвристики масштабирования на стороне браузера (например, автоматическое изменение размера текста на мобильных устройствах).

legacy

Значение по умолчанию. Для страницы не включено масштабирование font-size корневого элемента пропорционально настройкам масштаба текста на уровне ОС и браузера. Это равносильно отсутствию элемента <meta> (настройки шрифта на уровне ОС игнорируются).

Описание

Элемент <meta name="text-scale" content="scale" /> можно добавить в <head> документа, чтобы сообщить браузеру, что страница спроектирована с учётом различных пользовательских настроек размера шрифта; кроме того, он отключает существующие механизмы и эвристики на стороне браузера.

В частности, он задаёт начальное значение font-size корневого элемента <html> так, чтобы оно изменялось пропорционально пользовательским настройкам размера шрифта на уровне ОС и браузера. Значение initial для корневого font-size — medium, которое определяет значение единицы rem. Если задать для корневого font-size или оставить ему значение по умолчанию в виде единицы <length>, относительной к локальному или корневому шрифту, все последующие ключевые слова (например, medium) и относительные к шрифту значения длины (например, em и rem) будут масштабироваться пропорционально настройкам размера шрифта ОС или браузера.

Например, если на странице есть <meta name="text-scale" content="scale">, следующее правило:

p {
  font-size: medium;
}

приведёт к тому, что все элементы <p> получат масштабируемый размер шрифта. Для того же эффекта можно также задать font-size равным initial.

На мобильных платформах по умолчанию это не происходит. <meta name="text-scale" content="scale" /> включает такое масштабирование. На настольных платформах это приводит к тому, что переменная среды env(preferred-text-scale) отражает множитель, соответствующий настройкам размера шрифта браузера, но помимо этого заметных преимуществ нет.

Краткое описание использования

Подводя итог: задавайте scale только в том случае, если ваше приложение рассчитано на масштабирование шрифта. Рекомендуется:

1. Добавить <meta name="text-scale" content="scale" /> в <head> страницы.
2. Не переопределять начальное значение font-size для :root с помощью значения абсолютной единицы длины (например, 16px).
3. Для задания размеров содержимого использовать только единицы, относительные к шрифту, например em/rem, или ключевые слова, например small, x-large и т. д.

<meta name="text-scale"> и env(preferred-text-scale)

Для задания размеров относительно настроек масштаба текста ОС рекомендуется использовать <meta name="text-scale" />, а не переменную среды env(preferred-text-scale). На мобильных устройствах они дают похожий эффект, однако <meta> также улучшает работу в настольных браузерах (и проще в использовании).

Не используйте обе возможности одновременно: масштабирование текста может примениться дважды, из-за чего относительные к шрифту малые размеры станут ещё меньше, а большие — ещё больше.

Примеры

Демонстрация масштабирования текста в meta viewport

В этом примере показан эффект от <meta name="text-scale" content="scale">.

HTML

Мы добавляем элемент <meta name="text-scale" content="scale"> в документ <head>, а также элемент <meta name="viewport">, чтобы обеспечить корректное отображение на мобильных устройствах. Кроме того, внутри элементов <p> размещено текстовое содержимое с различными значениями атрибута class, чтобы можно было применить к ним разные стили.

<!doctype html>
<html lang="en-US">
  <head>
    <meta name="text-scale" content="scale" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <p class="text-scale">
      This font size obeys the user's font preferences, whether those
      preferences are specified at the operating system level or the user agent
      level.
    </p>
    <p class="fixed">
      This font size does NOT respect the user's font preferences, even with
      text-scale set.
      <span class="text-scale">But this font size does!</span>
    </p>
  </body>
</html>

CSS

Текстовым контейнерам со значением text-scale для class задаётся font-size размером 1rem. Это означает, что в браузерах с поддержкой <meta name="text-scale" content="scale"> размер такого текста будет изменяться при смене настроек шрифта ОС или браузера. Текстовым контейнерам со значением fixed для class задаётся font-size размером 20px. Это означает, что размер такого текста останется фиксированным при смене настроек шрифта ОС или браузера.

.text-scale {
  font-size: 1rem;
}

.fixed {
  font-size: 20px;
}

Результат

В этой версии элемент <meta name="text-scale"> присутствует:

В этой версии элемент <meta name="text-scale"> ОТСУТСТВУЕТ:

Проверьте эти примеры в мобильном браузере. Измените предпочтительный размер шрифта в настройках экрана или специальных возможностей мобильного устройства. Обратите внимание: в первом примере, когда включён <meta name="text-scale">, верхняя и нижняя строки текста масштабируются пропорционально настройкам ОС, а размер средней строки, для которой font-size задано с помощью абсолютных единиц, не меняется. Без элемента <meta name="text-scale"> текст не масштабируется пропорционально настройкам ОС.

Чтобы упростить проверку, можно открыть полноэкранные версии обоих примеров в отдельных вкладках по ссылкам ниже:

• Пример с <meta name="text-scale">
• Пример без <meta name="text-scale">

Адаптивная компоновка с учётом масштаба текста

В этом примере показано, что при применении <meta name="text-scale"> к странице можно использовать относительные к шрифту размеры в медиазапросах @media, чтобы мобильные браузеры автоматически корректировали контрольные точки при изменении размера текста в ОС.

HTML

Как и в предыдущем примере, наша разметка снова содержит элементы <meta name="text-scale"> и <meta name="viewport"> в <head>. В этом примере содержимое body включает два элемента — <main> и <aside>, — которые представляют основную колонку содержимого и боковую панель.

<!doctype html>
<html>
  <head>
    <meta name="text-scale" content="scale" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <main>Main content</main>
    <aside>Aside content</aside>
  </body>
</html>

CSS

По умолчанию основное содержимое и боковая панель располагаются друг под другом. Мы добавляем медиазапрос @media, который размещает элементы рядом друг с другом с помощью CSS Grid, когда ширина области просмотра превышает 35rem.

@media (width > 35rem) {
  body {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 18.75rem;
  }
}

Результат

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

Чтобы упростить проверку, можно открыть демонстрацию в отдельной вкладке по ссылке ниже:

Спецификации

Совместимость с браузерами

См. также

• env(preferred-text-scale)
• [meta text-scale] Поддержка WebView на chromium.googlesource.com (2026)