Viewport

Viewport — это видимая область веб-страницы или приложения на экране пользователя в конкретный момент времени. На настольном компьютере viewport соответствует окну браузера за вычётом панелей инструментов, полос прокрутки и элементов интерфейса браузера. На планшетах и смартфонах viewport — это вся область экрана, которую может использовать браузер. Viewport определяет, как контент масштабируется, компонуется и отображается читателю. В HTML тег `<meta name="viewport">` сообщает браузеру, как управлять размерами и масштабированием страницы, и является основой [адаптивного дизайна](/glossary/responsive-design).

Контент, игнорирующий различия viewport, создаёт плохой опыт чтения на определённых устройствах. Текст может быть нечитаемо мелким на телефонах, кнопки — невозможно нажать, а для просмотра всей страницы может потребоваться горизонтальная прокрутка. Поскольку мобильные устройства сейчас обеспечивают большую часть веб-трафика, публикации, не адаптирующиеся к разным размерам viewport, теряют читателей и выглядят непрофессионально. Поисковые системы также учитывают мобильную оптимизацию в ранжировании, поэтому правильная обработка viewport влияет и на пользовательский опыт, и на видимость в результатах поиска.

Публикации FlipLink полностью адаптивны и автоматически подстраиваются под любой размер viewport. Просмотрщик флипбуков определяет доступные размеры viewport и соответственно настраивает рендеринг страниц, расположение элементов управления и уровни масштабирования. На широких десктопных viewport публикации отображаются в режиме [разворота](/glossary/page-spread). На узких мобильных viewport они переключаются на одностраничный режим с удобной сенсорной навигацией. Настройки [опыта чтения](/features/page-experience-and-layout) позволяют издателям выбирать между различными режимами компоновки, а FlipLink выполняет все вычисления viewport, чтобы контент оставался читаемым и пропорциональным. При встраивании флипбука с помощью кода [адаптивного встраивания](/features/sharing-and-distribution) он автоматически заполняет свой контейнер и реагирует на изменения viewport — включая поворот устройства — без дополнительной настройки.

Viewport управляется HTML мета-тегом `<meta name="viewport" content="width=device-width, initial-scale=1">`. Этот тег указывает браузеру установить ширину страницы равной ширине экрана устройства и начать с масштаба 1x. Без него мобильные браузеры рендерят страницы с виртуальной шириной около 980 пикселей, а затем уменьшают результат, делая текст крошечным и взаимодействие затруднительным. Ключевые свойства viewport: - **width**: Устанавливает ширину viewport. `device-width` соответствует фактической ширине экрана в CSS-пикселях. - **initial-scale**: Управляет уровнем масштабирования при первой загрузке страницы. Значение `1` означает отсутствие масштабирования. - **maximum-scale** и **user-scalable**: Управляют возможностью пользователя масштабировать жестом «щипок». Рекомендации по доступности советуют разрешать масштабирование. - **viewport-fit**: На устройствах с вырезами или закруглёнными углами `viewport-fit=cover` расширяет контент в безопасную область. CSS-медиазапросы используют размеры viewport для применения различных стилей. Например, `@media (max-width: 768px)` нацелен на viewport уже 768 CSS-пикселей — распространённая точка перехода от планшета к мобильному устройству.

**«Viewport и разрешение экрана — это одно и то же.»** Это не так. Телефон может иметь разрешение экрана 1170 x 2532 физических пикселей, но viewport 390 x 844 CSS-пикселей. Коэффициент плотности пикселей (DPR) связывает эти величины — на этом телефоне DPR равен 3, что означает, что каждый CSS-пиксель соответствует 9 физическим пикселям. Дизайнеры работают в CSS-пикселях (viewport), а не в физическом разрешении. **«Установка `user-scalable=no` улучшает опыт.»** Запрет масштабирования нарушает доступность для пользователей с нарушениями зрения. Современные веб-стандарты и аудиты доступности отмечают это как ошибку. Просмотрщик FlipLink позволяет масштабирование жестом «щипок» по умолчанию, сохраняя целостность макета. **«Размеры viewport на десктопе одинаковы.»** Десктопные viewport сильно различаются. Пользователь с 27-дюймовым монитором и открытыми инструментами разработчика может иметь viewport всего 900 пикселей — это уже территория планшетов. Адаптивные публикации должны подстраиваться под фактические размеры viewport, а не под предполагаемые категории устройств.

Viewport — это окно, через которое читатели видят ваш контент. Публикации, реагирующие на размер viewport, обеспечивают единообразный профессиональный опыт на каждом устройстве — от 4-дюймового смартфона до 32-дюймового настольного монитора — и читатель никогда не замечает происходящую адаптацию.