Для задания масштаба для мобильных браузеров в HTML можно использовать мета-тег viewport. Этот тег позволяет установить режим просмотра, масштабирования и размер экрана для веб-страницы.
Примерный вид мета-тега viewport выглядит следующим образом:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Атрибут width=device-width устанавливает ширину вьюпорта равной ширине устройства, а атрибут initial-scale=1.0 устанавливает начальный масштаб равным 1.0.
Этот мета-тег позволяет адаптировать веб-страницу к различным размерам экранов мобильных устройств, таким образом, что она отображается оптимально и без горизонтального скроллинга.
Например, если у вас есть следующая HTML-разметка:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это пример масштабирования для мобильных устройств.</p>
</body>
</html>
То при просмотре этой страницы на мобильном устройстве она будет отображена без горизонтального скроллинга и в соответствии с размером экрана устройства.
Мета-тег viewport также позволяет управлять другими аспектами отображения, такими как разрешение и плотность пикселей, адаптивный дизайн и т. д. С помощью атрибутов можно установить требуемые значения для каждого аспекта.
Например, для задания фиксированной ширины страницы, используйте значение width, а для задания фиксированного масштаба - значение initial-scale.
Таким образом, использование мета-тега viewport является важным шагом при разработке адаптивного дизайна для мобильных устройств, чтобы обеспечить оптимальное отображение веб-страницы на разных экранах.