Viewport для адаптивной верстки: meta name viewport что это?

meta name viewport что это?

Мета-теги для адаптивной вёрстки: viewport, X-UA-Compatible, HandheldFriendly

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

 

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="HandheldFriendly" content="true"/>


// мета-тег viewport 
//-- атрибут width определяет ширину области просмотра в пикселях (от 200 до 10000) или равной ширине страницы в соответствии с размером экрана (константа device-width)
// если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.
//-- атрибут height определяет высоту области просмотра в пикселях (от 233 до 10000 пикселей) или равной высоте страницы в соответствии с размером экрана (константа device-height)
//-- атрибут initial-scale определяет начальный масштаб страницы в единицах  от 0.1 до 1.0
//-- атрибут user-scalable определяет доступность масштабирования страницы пользователем
//-- атрибут minimum-scale определяет минимальный масштаб области просмотра в единицах от 0.1 до 1.0
//-- атрибут maximum-scale определяет максимальный масштаб области просмотра в единицах от 0.1 до 1.0
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
// для приведённого примера: установить ширину области просмотра равной ширине экрана, изначально не масштабировать страницу, запретить пользователю масштабировать страницу

// мета-тег указывает только для IE (до 11 версии) наиболее совместимый режим работы: edge
// атрибут chrome=1 устарел с 2014 года
// в целом этот мета-тег устарел
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

// мeta-тег определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry (в браузере AvantGo). 
// распознаётся многими другими мобильными браузерами.
// в целом этот мета-тег устарел, но используется по инерции
<meta name="HandheldFriendly" content="true"/>


// мета-теги для Apple устройств
// https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Устанавливает, будет ли веб-приложение работать в полноэкранном режиме.
<meta name="apple-mobile-web-app-capacity" content="yes">

Вёрстка 12.09.2016 up: 17.11.2020 просмотров: 4.7k

meta viewport. Как он работает?

Статья, в которой познакомимся с метатегом viewport. Рассмотрим, какие значения может принимать атрибут content данного метатега, а также как его настроить для адаптивного и фиксированного сайта.

Что такое viewport

Viewport — это видимая пользователю область веб-страницы. Т.е. это то, что может увидеть пользователь, не прибегая к прокрутке.

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″. А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.

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

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

Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.

Первое устройство — это смартфон Apple iPhone 3 (диагональ 3.5″). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi). Физическое разрешение данного смартфона составляет 320×480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера.

Второе устройство — это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5″. Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение — 640×960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Таким образом, текст будет реально выглядеть на 8px. Такая страница будет уже трудночитаемой. Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать).

Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.

Метатег viewport, как уже было отмечено выше, в большой степени предназначен для адаптивной разметки. Поэтому начнём рассмотрение именно с неё.

Настройка meta viewport для адаптивных веб-страниц

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

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

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

• width=device-width
• initial-scale=1

Рассмотрим каждый из них более подробно.

Первый параметр (width=device-width) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width). Данная ширина (CSS) — это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.

Например, смартфон iPhone4 с физическим разрешением 640×960 имеет CSS разрешение 320×480. Это означает то, что сайт с метатегом viewport (

Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?

Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле

Рассмотрим несколько примеров:

• Apple iPhone 3: физическое разрешение 320×480, плотность пикселей — 163ppi. Плотность пикселей меньше 200, следовательно, CSS коэффициент равен 1. CSS разрешение будет равно физическому, т.е. 320×480.
• Apple iPhone 6: физическое разрешение 750×1344, плотность пикселей — 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375×667.
• LG G4: физическое разрешение 1440×2560, плотность пикселей — 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360×640.
• Galaxy S3 mini: физическое разрешение 480×800, плотность пикселей — 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320×533.
• Galaxy S5: физическое разрешение 1080×1920, плотность пикселей — 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360×640.

Второй параметр initial-scale — устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

meta viewport и не адаптивные страницы

Если сайт не имеет адаптивный дизайн, то его представление на экране смартфона тоже можно улучшить.

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width. Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:

<meta name="viewport" content="width=device-width">

Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

<meta name="viewport" content="initial-scale=1">

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

• minimal-scale — задаёт минимальный масштаб;
• maximal-scale — устанавливает максимальный масштаб;
• user-scalable — указывает, может ли пользователь управлять масштабом или нет.

Примеры viewport с использованием дополнительных параметров:

<!-- viewport, без возможности его увеличения пользователем -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- viewport, c возможностью его увеличения пользователем -->
<meta name="viewport" content="width=device-width, user-scalable=yes">

<!-- viewport, имеющий ширину 1024 пикселя -->
<!-- Веб-страница, с фиксированным макетом (например, с шириной 1024px или меньше) будет изначально отображаться на экране мобильного просмотра без прокрутки -->
<meta name="viewport" content="width=1024">

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

Я уверен, что многие используют мета-тег Viewport для масштабирования дизайна, но знаете ли вы, что этот тег также может быть очень полезен для мобильных устройств? Если у вас нет времени, чтобы преобразовать ваш проект, тем не менее, вам следует прочитать эту статью о том, как использовать тег Viewport для улучшения внешнего вида вашего проекта на мобильных устройствах.

Главное использование тега Viewport

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

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Использование тега Viewport для сайтов, не рассчитанных под мобильные устройства.

Как вы знаете, по умолчанию ширину окна просмотра на iPhone является 980px. Но ваш дизайн может не поместиться в этом диапазоне. Он может быть шире или уже. Ниже приведены два примера, где Вы можете использовать эти теги для улучшения отображения вашего сайта на мобильных устройствах.

Пример

Взгляните на сайт Themify на iPhone.

На скриншоте слева показывается, как сайт будет выглядеть без тега. Как вы можете видеть, страница касается обеих сторон. Веб-мастер добавил Viewport тег, чтобы задать ширину окна 1024px, поэтому он оставляет некоторый запас пространства на левой и правой сторонах.

<meta name=»viewport» content=»width=1024″>

Другой пример.

Если ваш проект является слишком узким, это может также вызвать проблемы. Допустим, ширина контейнера вашего дизайна 700px, и это не правильно, это будет выглядеть как на скриншоте слева, где есть большое пустое пространство справа.

Вы можете просто исправить это, установив ширину окна в 720px. Ширина вашего дизайна не меняется, но iPhone будет масштабировать, чтобы поместиться в 720px.

 <meta name=»viewport» content=»width=720″>

Распространенная ошибка

Распространенной ошибкой является то, что люди часто добавляют initial-scale=1 на не отвечающий размерам дизайн. Это делает страницу в масштабе 100% без масштабирования. Если ваш проект не помещается на экран, пользователям придется уменьшить масштаб, чтобы увидеть полную страницу. Еще хуже, когда объединяют user-scalable=no или maximum-scale=1 с initial-scale=1. Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.

Помните: если ваш проект не отвечает размерам окна и не сбрасывает initial-scale, то отключите масштабирование!

<meta name=»viewport» content=»initial-scale=1, maximum-scale=1, user-scalable=no»>

Основы адаптивной вёрстки | Frontips.ru

Рассмотрим основы адаптивной вёрстки, что такое область просмотра (viewport), как использовать @media запросы и некоторые не самые очевидные нюансы

Что такое адаптивная вёрстка?

Адаптивная вёрстка подразумевает под собой вёрстку под разные устройства на основе @media запросов. Если условие @media запроса выполняется, то будут применены соответствующие стили

@media запросы могут быть основаны на размерах, типе, ориентации, разрешении, пропорциях устройства, на различных состояниях элементов, и других условиях, включая даже уровень окружающего освещения

В данной статье рассмотрим основы адаптивной вёрстки, основанной на размерах области просмотра (viewport)

Область просмотра (viewport)

Область просмотра (viewport) — основная часть браузера, где отображается контент.

Чтобы @media запросы корректно работали на мобильных устройствах необходимо добавить специальный мета тег <meta name="viewport">

Мета тег <meta name="viewport"> отвечает за размер области просмотра и масштаб страницы на мобильных устройствах

Мета тег <meta name="viewport"> размещаем в HTML файле в секции <head></head>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- добавляем мета тег viewport -->

    <title>Adaptive</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body></body>
</html>

Для мета тега <meta name="viewport"> добавляем атрибут content="" и указываем в нём необходимые свойства через запятую <meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width — область просмотра (viewport) будет равняться ширине мобильного устройства

initial-scale=1 — устанавливает масштаб страницы при первой загрузке

Этих свойств достаточно, чтобы @media запросы корректно работали на мобильных устройствах

Существуют дополнительные свойства, которые можно добавить для мета тега <meta name="viewport"> в атрибуте content=""

maximum-scale=3.0 — устанавливает максимально возможное значение масштабирования

minimum-scale=0.86 — устанавливает минимально возможное значение масштабирования

user-scalable=no — запрещает масштабирование

shrink-to-fit=no — исправляет отображение области просмотра (viewport) в браузере Safari на iOS

Как узнать размеры области просмотра (viewport)?

Для разработки и тестирования адаптивной вёрстки по размерам области просмотра (viewport) необходимо определить эти размеры

Браузеры Google Chrome и Mozilla Firefox имеют инструменты для тестирования адаптивной вёрстки, которые отображают размеры внутреннего окна и могут устанавливать необходимый размер окна по введенным значения

Чтобы открыть инструмент для адаптивной вёрстки в Mozilla Firefox нажимаем клавишу F12 и в инструментах разработчика в правом верхнем углу нажимаем на иконку со смартфоном и планшетом

Окно станет выглядеть следующим образом

В Google Chrome аналогично — нажимаем клавишу F12 и в инструментах разработчика в левом верхнем углу нажимаем на иконку со смартфоном и планшетом

Окно станет выглядеть следующим образом

@media запросы основаны на полной ширине окна браузера, включая полосы прокрутки — подробнее об этом в статье Плагин для отображения размеров окна браузера

Если кратко, то на мобильных устройствах и в браузерном инструменте для адаптивной вёрстки полоса прокрутки (scrollbar) не влияет на размеры контентной части, а в десктопных браузерах когда появляется полоса прокрутки (scrollbar), то она отнимает у контентной части около 17px. На мобильных контент будет на всю ширину браузера, а к примеру, на десктопных браузерах при ширине 1200px, если есть полоса прокрутки, то контентная часть будет около 1183px — этот нюанс не самый очевидный, но нужно его учитывать

Существует два подхода адаптивной вёрстки по размерам области просмотра (viewport) — Mobile First и Desktop First.

При Mobile First верстаем от меньшего экрана к большему и применяем @media (min-width: 1200px)

При Desktop First верстаем от большего экрана к меньшему и применяем @media (max-width: 1199.98px)

На практике Mobile First встречается реже, чем Desktop First, поэтому обычно сначала верстаем макет для больших экранов, затем с помощью @media запросов адаптируем макет под меньшие экраны, используя контрольные точки (breakpoints).

@media запросы записываются в CSS файле следующим образом

@media (min-width: 1200px) {
  /* стили указанные здесь применяются, если ширина viewport больше или равно 1200px */
}

@media (max-width: 1199.98px) {
  /* стили указанные здесь применяются, если ширина viewport меньше или равно 1199.98px */
}

Разница в 0.02px нужна для избежания пересечения @media запросов, чтобы разные стили не применялись для двух разных @media запросов одновременно

Контрольные точки (breakpoints)

Для примера возьмем контрольные точки, которые используются в Bootstrap

Bootstrap использует @media запросы основанные на размерах большинства устройств, поэтому не обязательно придумывать свои контрольные точки, а при необходимости можно добавить еще @media запросы или изменить существующие

@media (max-width: 1199.98px) {  }

@media (max-width: 991.98px) {  }

@media (max-width: 767.98px) {  }

@media (max-width: 575.98px) {  }

Логика адаптивной вёрстки Desktop First

Предположим, есть макет шириной 1170px. Верстаем его в браузере на большом экране. Пишем основные стили. Когда десктоп версия макета готова, начинаем делать адаптивную вёрстку.

Устанавливаем ширину окна браузера в 1200px — минимальная ширина до первого @media запроса @media (max-width: 1199.98px) { }.

Проверяем вёрстку при этих размерах. Если вёрстка соответствует макету, элементы не выходят за границы окна браузера, и не появляется горизонтальной полосы прокрутки, то продолжаем.

Устанавливаем ширину браузера в 992px — минимальная ширина до следующего @media запроса @media (max-width: 991.98px) { }

Делаем первый @media запрос — @media (max-width: 1199.98px) { }

При ширине окна браузера 992px элементы сужаются, выходят за границы окна браузера, создают горизонтальную полосу прокрутки (scrollbar). Поэтому внутри @media запроса @media (max-width: 1199.98px) { } начинаем переназначать предыдущие стили элементов так, чтобы вёрстка выглядела корректно — уменьшаем отступы, размер шрифта, какие-то элементы переносим или скрываем и так далее — все зависит от требований к макету.

Обратите внимание, что мы не должны переписывать все свойства элементов, а только переназначаем необходимые свойства

Если дизайнер не предоставил макеты на определенную ширину или заказчик не указал требования к адаптивной вёрстке, делаем на своё усмотрение, но соблюдая основную идею дизайна — уменьшать элементы и отступы пропорционально и переносить/скрывать блоки так, чтобы логика сохранялась

Когда вёрстка при ширине браузера 992px выглядит корректно, то устанавливаем браузеру ширину в 768px — минимальная ширина до следующего @media запроса @media (max-width: 767.98px) { }.

Переназначаем стили в блоке @media запроса @media (max-width: 991.98px) { }, чтобы вёрстка выглядела корректно теперь при ширине 768px

Далее устанавливаем ширину 576px и переназначаем стили в блоке @media (max-width: 767.98px)

Если дизайнер/заказчик не указали минимальную ширину для адаптивной вёрстки, то устанавливаем 320px. Для этой ширины переназначаем стили элементов в блоке @media запроса @media (max-width: 575.98px) { }

Когда вёрстка будет выглядеть корректно при всех вышеописанных размерах браузера (1200px, 992px, 768px, 576px, 320px), проверяем вёрстку плавно изменяя размер окна от большего к меньшему, чтобы убедиться что при промежуточных размерах вёрстка не ломается. При неоходимости корректируем стили элементов в том блоке @media запроса, где элементы отображаются некорректно, для этого используем инструменты разработчика (devtools) в браузере

Инструменты разработчика позволяют быстро найти элемент, посмотреть его размеры, отступы, стили, расположение стилей, использование @media запросов, менять значение свойств прямо в браузере

Открыть инструменты разработчика можно нажатием клавиши F12

Чтобы просмотреть сразу расположение элемента и отобразить его свойства нажимаем правой кнокой мыши на элемент и выбираем Исследовать элемент в Mozilla Firefox или Просмотреть код в Google Chrome

Например, хотим узнать про элемент заголовка карточки, нажимаем на нём правой кнопкой мыши и выбираем Исследовать элемент в Mozilla Firefox

Открывается окно инструментов, где с левой стороны видим расположение элемента в HTML, а справой стороны CSS свойства элемента

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

В правой части инструментов разработчика можно выбрать значение CSS свойства и назначить другое значение, в браузере сразу же будут видны изменения.

Значение можно писать вручную или постепенно менять значение стрелками вверх или вниз на клавиатуре.

При вводе значения вручную будут выводиться подсказки

Если значение некорректно и не применяется, то будет перечеркнуто

Можно самостоятельно отключить необходимое свойство, нажав на чекбокс перед этим свойством

Можно назначить новое свойство, нажав на пустое место в пределах блока свойств элемента. Также будут выведены подсказки возможных свойств

Все эти изменения сразу отображаются в браузере, что удобно при разработке и отладке адаптивной вёрстки. После перезагрузки страницы изменения сбрасываются

Также можно посмотреть расположение стилей — указывается имя файла, строка в файле и использование @media запросов

Простой пример адаптивной вёрстки

Полный пример на Codepen

Ниже распишу только ключевые моменты адаптивности

Начальные стили десктоп вёрстки при ширине 1200px

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}
.cards__col {
  width: 33.33333333%;
  padding: 0 15px 30px;
}

При ширине 992px карточки немного сужаются, но все еще отображаются корректно, поэтому пока без изменений

При ширине 768px карточки становятся очень узкими, поэтому переназначаем свойство карточки width, чтобы карточки отображались по две в ряд

@media (max-width: 991.98px) {
  .cards__col {
    width: 50%;
  }
}

При ширине 576px карточки также становятся узкими, поэтому снова переназначаем свойство карточки width чтобы карточки отображались по одной

@media (max-width: 767.98px) {
  .cards__col {
    width: 100%;
  }
}

При ширине 320px карточкам не хватает места, и они также выглядят довольно узкими, поэтому уменьшим внутренние отступы padding контейнера .container

@media (max-width: 575.98px) {
  .container {
    padding: 0 15px;
  }
}

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

Дополнительно

Немного дополнительной информации по адаптивной вёрстке

@media запросы по размерам viewport могут быть как по ширине, так и по высоте, но используется обычно реже

@media (max-height: 719.98px) {
  .container {
    padding: 0 15px;
  }
}

@media (min-height: 720px) {
  .container {
    padding: 0 15px;
  }
}

@media запросы можно комбинировать, например нужны только стили для планшетных экранов в диапазоне от 576px до 767.98px

Стили назначенные в таком @media запросе будут применены только если все условия выполнены

@media (max-width: 767.98) and (min-width: 576px)  {
  .container {
    background: red;
  }
}

Можно определять свойства сразу для нескольких разных условий — такой @media запрос выполняется если хотя бы одно из перечисленных условий выполнено, например экраны меньше 575.98px и больше 1440px

@media (max-width: 575.98px), (min-width: 1440px)  {
  .container {
    background: red;
  }
}

Для упрощения адаптивной вёрстки желательно использовать Flexbox, Grid.

Желательно стараться использовать не фиксированные, а относительные величины (%, vw, vh, em, rem и так далее)

Итоги

В статье разобрали основы адаптивной вёрстки, но этих знаний достаточно, чтобы начать делать адаптивную вёрстку.

На практике можно применять дополнительные возможности @media запросов отталкиваясь от уже полученной информации.

При возможности, статья еще будет дополняться

Полезные ссылки

Использование медиа-запросов

Использование метатега viewport для управления разметкой на мобильных браузерах

HTML5 | Метатег Viewport

Метатег Viewport

Последнее обновление: 03.05.2016

Прежде всего рассмотрим один из ключевых моментов применения адаптивного дизайна — метатег viewport (по сути с этого тега и начивается адаптиный дизайн). Пусть для начала у нас есть следующая веб-страница:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Обычная веб-страница</title>
    </head>
    <body>
        <h3>Обычная веб-страница</h3>
    </body>
</html>

Это стандартная веб-страница, которая в обычном браузере будет выглядеть следующим образом:

Однако если мы запустим ту же самую веб-страницу в эмуляторе мобильного устройства или на реальном мобильном устройстве, то мы с трудом сможем прочитать, что же на ней написано:

Применяя масштабирование, пользователь может наконец-то увидеть, что же там все таки написано. Однако это не очень удобно. При этом веб-страница имеет много пустого места, что не очень красиво.

Почему так происходит? Дело в том, что каждый мобильный браузер задает странице некоторые начальные размеры и потом пытается приспособить под размеры экрана текущего мобильного устройства.

Вся видимая область на экране браузера описывается понятием Viewport. По сути viewport представляет область, в которую веб-браузер пытается «впихнуть» веб-страницу. Например, браузер Safari на iPone и iPod определяет ширину viewport по умолчанию равной 980 пикселям. То есть, получив страницу и вписав в viewport с шириной 980 пикселей, браузер сжимает ее до размеров мобильного устройства. Например, если ширина экрана смартфона составляет 320 пикселей, то до этого размера потом будет сжата страница. И ко всем элементам страницы будет применен коэффициент масштабирования, равный 320/980.

Почему в данном случае используется именно 980 пикселей, а, скажем, не реальный размер экрана? Все дело в том, что по умолчанию браузер считает, что каждая веб-страница предназначена для десктопов. А обычной шириной десктопного сайта можно считать 980 пикселей.

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

Чтобы избежать подобной не очень приятной картины, следует использовать метатег viewport. Он имеет следующее определение:

<meta name="viewport" content="параметры_метатега">

В атрибуте content мета-тега мы можем определить следующие параметры:

Теперь изменим предыдущий пример веб-страницу, использовав метатег:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
        <title>Обычная веб-страница</title>
    </head>
    <body>
        <h3>Обычная веб-страница</h3>
    </body>
</html>

Веб-страничка определенно выглядит лучше благодаря использованию метатега viewport. Используя параметр width=device-width мы говорим веб-браузеру, что в качестве начальной ширины области viewport надо считать не 980 пикселей или какое-то другое число, а непосредственную ширину экрана устройства. Поэтому затем веб-браузер не будет проводить никакого масштабирования, так как у нас ширина viewport и ширина одинаковы.

Мы также можем использовать другие параметры, например, запретить пользователю масштабировать размеры страницы:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">

как настроить область просмотра в адаптивном дизайне

Как настроить область просмотра в адаптивном дизайне с помощью мета-тега “viewport” или CSS правила @viewport и что делать, если анализ не видит “viewport”.

Экран и область просмотра в адаптивном дизайне

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

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

Размер, разрешение экрана, плотность пикселей у разных устройств отличаются. Выделяют такие показатели:

• диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
• размер экрана в точках — количество точек, их устройство использует для координат;
• полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
• физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5″ физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

• плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
• от 200 до 300 DPI — 1.5.
• более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

В основе адаптивного дизайна лежат принципы подвижности и пропорциональности. Веб-мастеры создают макеты в высоком разрешении, располагая контент по модульной сетке из 12, 16 или 24 колонок Bootstrap, и используют адаптивную верстку. Сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега «viewport» в HTML. Это позволяет добиться четких изображений и читабельного текста.

Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример требований by andrey-hohlov на GitHub.

Как работает мета-тег viewport

Viewport — это видимая пользователю область страницы сайта без прокруток.

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

Мета-тег «viewport» и CSS правило @viewport

Правило @viewport разработала компания Windows, сейчас оно поддерживается несколькими браузерами, но ожидается, что станет будущим стандартом для веб.

Разработчики контролируют масштаб отображения страницы сайта в окне устройства с помощью мета-тега «viewport» или правила @viewport, которое управляет масштабированием с помощью CSS. Тег используют для адаптивных сайтов и для ресурсов с фиксированной или гибкой разметкой в том числе.

Справа мобилопригодная страница с тегом «viewport», в котором указана область просмотра страницы — она равна ширине экрана. Пользователь не масштабирует страницу и видит контент в удобном для чтения размере, блоки контента смещены так, что горизонтальной прокрутки нет.

Страницы сайта должны корректно отображаться на разных дисплеях, для этого в HTML-страницу нужно включить мета-тег «viewport», а в CSS добавить правило @viewport.

Мета-тег «viewport» размещают в блок в таком виде:

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

Особенности поддержки правила @viewport браузерами есть в спецификации. Пока оно мало распространено, но скорее всего станет стандартом в CSS.

@viewport { width: device-width;}

Сейчас к правилу @viewport рекомендуют добавлять вендорный префикс:

@-ms-viewport { 
 width: device-width;
}
@-o-viewport { 
 width: device-width;
}
@viewport { 
 width: device-width;
}

Как настроить размер окна просмотра

Атрибут «width»

Атрибут «width» адаптирует ширину окна просмотра к экрану устройства. Указывают либо целое неотрицательное значение от 200px до 10 000px, либо константу «device-width» — она означает, что устройство масштабирует ширину страницы под размер экрана.

Веб-мастер может установить конкретное число пикселей в этом атрибуте, к примеру, width=600. Так делают, если макет должен быть не менее 600px шириной. Если экран окажется больше, браузер не будет увеличивать масштаб, а станет расширять область просмотра, чтобы она растянулась до размеров экрана.

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

К примеру, на большинстве смартфонов действует стандарт «device-width» в 320px. Если пользователь смотрит сайт с мобильного устройства дисплеем 640px, изображение шириной 320px займет весь экран, используя удвоенное количество пикселей. Поскольку экран использует удвоенную плотность пикселей по сравнению со стандартным монитором, текст на маленьком экране будет казаться четче.

Какие значения масштаба использовать

Размеры видимой области страницы в окне устройства определяют по размеру экрана и плотности пикселей. Если плотность пикселей на устройстве не совпадает с плотностью изображения — фактическим количеством пикселей, то устройство должно масштабировать значения.

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

Веб-мастеру будет сложно работать с сайтом, если он задался целью определить контрольные точки на макете для разных классов и моделей устройств. Список размеров экранов мобильных устройств и планшетов насчитывает 286 элементов, вместо этого достаточно вписать относительные величины в процентах. Если для блока верхнего уровня установить параметр «width=100%», на любом устройстве он поместится в экран и не будет слишком маленьким или слишком большим. 

div.fullWidth {
 width: 100%;
}

Как использовать медиазапросы CSS

Для улучшения отображения на разных экранах в правило @viewport добавляют медиазапросы — фильтры, которые позволяют изменять стили CSS на основании характеристик устройства: ориентации, параметров экрана, ориентации и типа устройства.

С помощью медиазапросов CSS веб-мастер может настроить отображение стилей в зависимости от размера экрана устройства. Для этого применяют код:

@media (query) {
 /* CSS Rules used when query matches */
}

В адаптивном дизайне применяют функции:

• «min-width» — применимо к браузеру, ширина которого больше, чем указано в запросе;
• «max-width» — к браузеру, ширина которого меньше;
• «min-height» — к браузеру, высота которого больше значения, указанного в запросе;
• «max-height» — к браузеру, высота которого меньше.

Если устройство имеет диапазон разрешения от 640 до 1024px, указанное правило @viewport будет масштабировать окно до 640px:

@media screen and (max-width: 400px) {
 @-ms-viewport { width: 320px; } 
 ...
}

К примеру, установим значения:

При ширине браузера от 0 до 640px применяется max-640px.css.

При ширине браузера 500-600px применяются стили из @media.

При ширине браузера 640px и выше применяется min-640px.css.

Если в браузере ширина больше высоты — горизонтальная ориентация, применяется landscape.css.

Если в браузере высота больше ширины — вертикальная ориентация, применяется portrait.css.

Код для этих значений будет выглядеть так:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
 @media (min-width: 500px) and (max-width: 600px) {
 h2 {
 color: fuchsia;
 }
 .desc:after {
 content:" In fact, it's between 500px and 600px wide.";
 }
 }
</style>

Как настроить отображение в зависимости от ориентации дисплея

Атрибут «initial-scale=1»

Некоторые браузеры при изменении ориентации с вертикальной на горизонтальную увеличивают масштаб. Атрибутом «initial-scale=1» указывают браузеру соотношение пикселей CSS и устройства независимо от ориентации дисплея, в соотношении один к одному. В ориентации по горизонтали страница будет выглядеть лучше. Атрибут может иметь значение от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибуты «maximum-scale», «minimum-scale» и «user-scalable»

Кроме настройки «initial-scale» у разработчика есть возможность настроить атрибуты «maximum-scale», «minimum-scale» и «user-scalable». Они ограничивают масштабирование страницы пользователем или вовсе запрещают его.

«maximum-scale» и «minimum-scale» определяют максимальный и минимальный масштаб окна. Могут иметь значения от от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибут «maximum-scale=1» при переключении ориентации оставит настройки масштаба неизменными:

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

«user-scalable» определяет, может ли пользователь изменять масштаб. Он имеет значение «no» или «yes», по умолчанию стоит «yes».

Аналоги для правила @viewport

У «initial-scale» в мета-теге есть аналоги для правила @viewport — это дескрипторы «zoom», «max-zoom» и «min-zoom», они работают также.

@viewport { 
 width: device-width; 
 zoom: 2;
}

Свойство «user-scalable» в HTML имеет эквивалент «user-zoom» в CSS:

@viewport { 
 width: device-width; 
 user-zoom: fixed;
}

Дескриптор «orientation»

Ориентацией документа в @viewport можно управлять с помощью дескриптора «orientation». У него есть три значения:

• auto — ориентация на основе положения устройства;
• landscape — горизонтальная ориентация;
• portrait — вертикальная ориентация.

По умолчанию установлено значение auto.

Медиазапросы и «device-width»

Google в руководстве для веб-мастеров предлагает комбинировать значения «device-width» с медиа-запросами и настраивать макет в зависимости от ориентации устройства:

@media screen and (min-width:480px) and (max-width:800px) {
 /* Target landscape smartphones, portrait tablets, narrow desktops
 */
}
@media screen and (max-width:479px) {
 /* Target portrait smartphones */
}

Этот код позволяет настроить изменение сайта в зависимости от горизонтальной или вертикальной ориентации страницы, не указывая конкретные размеры в пикселях:

@media all and (orientation: landscape) {
 /* Target device in landscape mode */
}
@media all and (orientation: portrait) {
 /* Target device in portrait mode */
}

Атрибуты «height» и «device-height»

Если на сайте есть элементы, которые меняют свой размер в зависимости от высоты окна просмотра контента, в мета-теге применяют атрибут «height» — он определяет высоту Viewport. Указывают целое неотрицательное значение «height» от 223px до 10000px или константу «device-height».

Если шаблон неадаптивный

Не рекомендуют использовать «initial-scale=1» для неадаптивных шаблонов — с такой установкой страница будет отображаться в масштабе 100%, в неадаптивном дизайне пользователю придется устанавливать масштаб вручную или прокручивать.

Не используйте «user-scalable=no» или «initial-scale=1» вместе с «maximum-scale=1» на неадаптивных шаблонах — это отключит масштабирование страницы, а без него пользователь не сможет увидеть всю страницу сайта.

Если не использовать «viewport»

В теге или правиле «viewport» браузер находит инструкции для масштабирования страницы ресурса, а если его не указать, браузер покажет пользователю стандартный размер десктопной страницы, который обычно составляет 960+px, и попробует оптимизировать содержимое увеличением шрифтов и элементов. Он покажет контент, поместившийся на экране, а пользователю придется масштабировать страницу вручную или использовать горизонтальную прокрутку.

Такие страницы поисковики не будут считать адаптивными, а значит не дадут им высокие позиции в топе. Высокий процент отказов поисковики расценят как сигнал бесполезности сайта. Мобилопригодность важна при ранжировании в Яндексе и Google. В 2016 году в Яндексе появился алгоритм «Владивосток», в 2018 «Андромеда», а Google в 2018 году заявил, что мобильный индекс будет в приоритете и для мобильной, и для десктопной выдачи. На начало 2019 перевод в мобильный индекс еще не завершен до конца.

Поисковики распознают адаптивный дизайн сайта, если у робота будет доступ к ресурсам страницы — CSS, JavaScript и изображениям. Убедитесь, что доступ в файле robots.txt открыт.

Проверить мобилопригодность страницы

Протестировать, адаптирована ли страница для мобильного просмотра, можно с помощью теста от Google. Он определит мобилопригодность и перечислит ошибки, которые нужно исправить.

Отображение на мобильных устройствах в числе прочих тестов покажет «Анализ сайта» от PR-CY. Он оценит мобилопригодность по нескольким параметрам, покажет область просмотра на экране и даст советы по исправлению ошибок.

Мета-тег «viewport» не входит в официальные стандарты, но общепризнан, его поддерживают большинство браузеров и используют многие сайты. Работа с этим тегом описана в том числе в документации Apple и в документации Android для разработчиков.

Материалы и руководства для веб-мастеров

Сайты, не адаптированные для устройств с разными экранами, теряют большую часть трафика. Адаптивным будет сайт, если его контент удобно просматривать с любого устройства — для этого разработчики размечают область просмотра с помощью мета-тега «viewport» в HTML, а в CSS иногда добавляют правило @viewport.

Viewport — CSS: Адаптивность

Первое, с чем необходимо познакомиться при создании адаптивной вёрстки, — мета-тег viewport. Созданный в компании Apple, он стал стандартом при создании вёрстки.

До перехода к мета-тегу необходимо разобраться, чем является viewport в браузере. Вьюпорт (viewport) — видимая пользователю область страницы, которая доступна без прокрутки.

На картинке ниже viewport обозначен красной границей.

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

Мета-тег viewport позволяет нам указать, какая область просмотра необходима для страницы. Чаще всего его используют для указания ширины области просмотра, так как вертикальный скролл является естественным при работе с веб-страницами. Ширина устанавливается через атрибут width:

<meta name="viewport" content="width=700">

После установки такого мета-тега, ширина области просмотра нашего сайта станет 700 пикселей.

Чтобы увидеть, как это работает, возьмём эмуляцию экрана iPhone 5. Стандартный браузер Safari по умолчанию имеет viewport равный 980 пикселей. Добавим блок шириной 700 пикселей. Обратите внимание, что сейчас в HTML не указан мета-тег viewport.

Если вся ширина нашего сайта равна 700 пикселей, то такой зазор между блоком и краем экрана нас не будет устраивать. Теперь добавим мета-тег viewport, указав ширину 700 пикселей.

После установки ширины области просмотра в 700 пикселей, наш блок полностью охватывает экран устройства.

Помимо указания ширины в пикселях, есть специальное значение device-width, которое установит ширину области равной разрешению экрана устройства, с которого открыта страница.

Другим примером может служить текст. Возьмём эмуляцию iPhone5, который имеет разрешение 320 пикселей в ширину при стандартном viewport в браузере равным 980 пикселей. Напишем любой текст с размером шрифта 20 пикселей. Это достаточно большое значение, чтобы такой текст было комфортно прочитать с экрана мобильного устройства. Но что же мы получим?

Если вы смогли разобрать текст, то у вас очень хорошее зрение 🙂 Но на самом деле это не тот результат, который мы ожидали. Связано это с тем, что наш viewport сильно больше, чем реальное разрешение.

Скорректируем viewport, использовав значение device-width:

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

Масштабирование

initial-scale — указывает коэффициент масштабирования страницы. В качестве значения используется число от 0.1 до 10

initial-scale=1.0

initial-scale=2.0

Зачастую используется значение 1.0, чтобы браузер по умолчанию выводил наш макет в оригинальном масштабе, а не пытался его подстроить под область просмотра. Хоть это и кажется хорошей идеей, но любые изменения макета должны контролироваться разработчиком.

minimum-scale и maximum-scale устанавливают минимальный и максимальный коэффициент масштабирования страницы.

user-scalable даёт возможность пользователю масштабировать страницу. В смартфонах чаще всего это делается жестом двумя пальцами. Атрибут имеет всего два возможных значения: yes и no.

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

Дополнительные материалы

Дополнительное задание

Окно просмотра адаптивного веб-дизайна

Что такое область просмотра?

Область просмотра — это видимая пользователем область веб-страницы.

Область просмотра зависит от устройства и на мобильном телефоне будет меньше, чем на экране компьютера.

До появления планшетов и мобильных телефонов веб-страницы предназначались только для экранов компьютеров, и это было обычным явлением для веб-страницы должны иметь статический дизайн и фиксированный размер.

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

Это было не идеально !! Но быстрое исправление.

Настройка области просмотра

HTML5 представил метод, позволяющий веб-дизайнерам контролировать область просмотра через тег.

Вы должны включить следующий элемент viewport на все свои веб-страницы:

Это дает браузеру инструкции о том, как для управления размерами и масштабированием страницы.

Часть width = device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

Часть initial-scale = 1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра:

Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете щелкнуть две ссылки выше, чтобы увидеть разницу.

Размер содержимого в области просмотра

Пользователи используются для вертикальной прокрутки веб-сайтов как на компьютере, так и на мобильном устройстве. устройства — но не по горизонтали!

Итак, если пользователь вынужден прокручивать по горизонтали или уменьшать масштаб, чтобы увидеть на всей веб-странице это приводит к плохому взаимодействию с пользователем.

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

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

2. НЕ позволяйте контенту полагаться на определенную ширину области просмотра, чтобы рендеринг хорошо — Поскольку размеры и ширина экрана в пикселях CSS различаются широко между устройствами, контент не должен зависеть от определенной ширины области просмотра рендерить хорошо.

3. Используйте медиа-запросы CSS, чтобы применить разные стили для небольших и большие экраны — Установка большой абсолютной ширины CSS для элементов страницы приведет к тому, что элемент будет слишком широким для области просмотра на меньшем устройстве.Вместо этого рассмотрите возможность использования значений относительной ширины, например width: 100%. Также осторожно при использовании больших абсолютных значений позиционирования. Это может привести к тому, что элемент выходят за пределы области просмотра на небольших устройствах.

Использование метатега области просмотра для управления макетом в мобильных браузерах — HTML: HyperText Markup Language

Область просмотра браузера — это область окна, в которой можно просматривать веб-контент. Часто это не такой же размер, как отображаемая страница, и в этом случае браузер предоставляет пользователю полосы прокрутки для прокрутки и доступа ко всему содержимому.

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

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

Введите метатег области просмотра

Однако этот механизм не так хорош для страниц, оптимизированных для узких экранов с использованием медиа-запросов — например, если виртуальное окно просмотра составляет 980 пикселей, медиа-запросы с разрешением 640 или 480 пикселей или меньше никогда не будут использоваться, ограничивая эффективность таких методов адаптивного дизайна.

Чтобы смягчить эту проблему виртуального окна просмотра на устройствах с узким экраном, Apple представила «метатег области просмотра» в Safari iOS, чтобы веб-разработчики могли управлять размером и масштабом области просмотра.Многие другие мобильные браузеры теперь поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. Документация Apple хорошо объясняет, как веб-разработчики могут использовать этот тег, но нам пришлось провести некоторую детективную работу, чтобы точно выяснить, как реализовать его в Fennec. Например, в документации Safari говорится, что содержимое представляет собой «список с разделителями-запятыми», но существующие браузеры и веб-страницы используют любое сочетание запятых, точек с запятой и пробелов в качестве разделителей.

Узнайте больше о видовых экранах в различных мобильных браузерах в «Сказке о двух видовых экранах» в quirksmode.орг.

Типичный сайт, оптимизированный для мобильных устройств, содержит что-то вроде следующего:

Свойство width управляет размером области просмотра. Он может быть установлен на определенное количество пикселей, например width = 600 , или на специальное значение device-width , которое представляет собой ширину экрана в пикселях CSS в масштабе 100%. (Существуют соответствующие значения height и device-height , которые могут быть полезны для страниц с элементами, которые изменяют размер или положение в зависимости от высоты области просмотра.)

Свойство initial-scale управляет уровнем масштабирования при первой загрузке страницы. Свойства с максимальным масштабом, , с минимальным масштабом, и , масштабируемые пользователем , управляют тем, как пользователям разрешено увеличивать или уменьшать масштаб страницы.

Использование масштабируется пользователем = нет может вызвать проблемы с доступностью для пользователей с нарушениями зрения, такими как слабовидение.

В последние годы разрешение экранов возросло до размера, при котором отдельные пиксели трудно различить человеческим глазом.Например, современные смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920–1080 пикселей (~ 400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы с меньшим физическим размером, переводя несколько аппаратных пикселей для каждого «пикселя» CSS. Первоначально это вызывало проблемы с удобством использования и удобочитаемостью на многих веб-сайтах, оптимизированных для сенсорного ввода. Питер-Пол Кох писал об этой проблеме в «Пиксель — это не пиксель».

На экранах с высоким разрешением страницы с начальным масштабом = 1 будут эффективно масштабироваться браузерами.Их текст будет гладким и четким, но их растровые изображения, вероятно, не будут использовать полное разрешение экрана. Чтобы получить более четкие изображения на этих экранах, веб-разработчики могут захотеть проектировать изображения — или целые макеты — в большем масштабе, чем их окончательный размер, а затем уменьшать их с помощью CSS или свойств области просмотра. Это соответствует спецификации CSS 2.1, которая гласит:

Если плотность пикселей устройства вывода сильно отличается от плотности пикселей типичного компьютерного дисплея, пользовательский агент должен изменить масштаб значений пикселей.Рекомендуется, чтобы пиксельная единица относилась ко всему количеству пикселей устройства, которое наилучшим образом приближается к эталонному пикселю. Рекомендуется, чтобы эталонным пикселем был угол обзора одного пикселя на устройстве с плотностью пикселей 96 точек на дюйм и расстоянием от считывающего устройства на расстоянии вытянутой руки.

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

Соотношение пикселей по умолчанию зависит от плотности отображения. На дисплее с плотностью менее 200 точек на дюйм соотношение составляет 1,0. На дисплеях с плотностью от 200 до 300 точек на дюйм соотношение составляет 1,5. Для дисплеев с плотностью более 300 точек на дюйм отношение представляет собой целочисленное значение пола (, плотность /150 точек на дюйм). Обратите внимание, что соотношение по умолчанию истинно только тогда, когда масштаб области просмотра равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.

Сайты могут устанавливать для своего окна просмотра определенный размер.Например, определение "ширина = 320, начальный масштаб = 1" может использоваться для точного размещения на небольшом дисплее телефона в портретном режиме. Это может вызвать проблемы, если браузер не отображает страницу большего размера. Чтобы исправить это, браузеры при необходимости увеличивают ширину области просмотра, чтобы заполнить экран в требуемом масштабе. Это особенно полезно на устройствах с большим экраном, таких как iPad. (В книге Аллена Пайка «Выбор области просмотра для сайтов iPad» есть хорошее объяснение для веб-разработчиков.)

Для страниц, для которых задан начальный или максимальный масштаб, это означает, что свойство width фактически преобразуется в минимальную ширину окна просмотра .Например, если вашему макету требуется не менее 500 пикселей ширины, вы можете использовать следующую разметку. Когда экран имеет ширину более 500 пикселей, браузер расширяет область просмотра (а не увеличивает масштаб) до размеров экрана:

Другие доступные атрибуты: минимальный масштаб , максимальный масштаб и масштабируемый пользователем . Эти свойства влияют на исходный масштаб и ширину, а также ограничивают изменения уровня масштабирования.

Не все мобильные браузеры одинаково обрабатывают изменение ориентации. Например, Mobile Safari часто просто увеличивает масштаб страницы при переходе с книжной на альбомную, вместо того, чтобы раскладывать страницу, как если бы она была изначально загружена в альбомной ориентации. Если веб-разработчики хотят, чтобы их настройки масштаба оставались неизменными при переключении ориентации на iPhone, они должны добавить значение максимального масштаба , чтобы предотвратить это масштабирование, которое имеет иногда нежелательный побочный эффект, препятствующий увеличению масштабирования пользователями:

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

Если вы хотите знать, какие мобильные и планшетные устройства ширины области просмотра, здесь есть полный список размеров области просмотра для мобильных устройств и планшетов. Это дает такую ​​информацию, как ширина области просмотра в портретной и альбомной ориентации, а также физический размер экрана, операционная система и плотность пикселей устройства.

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

Основы адаптивного веб-дизайна

Как создавать сайты, отвечающие потребностям и возможностям устройства, на котором они просматриваются.

12 февраля 2019 г. • Обновлено 14 мая 2020 г.

Использование мобильных устройств для просмотра веб-страниц продолжает расти астрономическими темпами, и эти устройства часто ограничены размером дисплея и требуют другого подхода к как контент размещается на экране.

Адаптивный веб-дизайн, первоначально определенный Итаном Маркоттом в A List Apart, отвечает потребностям пользователей и устройств, которые они используют. Компоновка меняется в зависимости от размера и возможностей устройства. Например, на телефоне пользователи будут видеть контент в виде одного столбца; планшет может отображать одно и то же содержимое в двух столбцах.

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

Установите область просмотра #

Страницы, оптимизированные для различных устройств, должны включать метатег области просмотра в заголовке документа. Тег meta viewport дает браузеру инструкции по управлению размерами и масштабированием страницы.

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

   
  
  
… 
    
 … 
  
… 
  

Использование значения мета-области просмотра width = device-width указывает странице на соответствие ширине экрана в аппаратно-независимых пикселях.Пиксель, независимый от устройства (или плотности), является представлением одного пикселя, который на экране с высокой плотностью может состоять из множества физических пикселей. Это позволяет переформатировать содержимое страницы для соответствия разным размерам экрана, независимо от того, отображается ли он на маленьком мобильном телефоне или на большом настольном мониторе.

Некоторые браузеры поддерживают постоянную ширину страницы при повороте в альбомный режим и увеличивают масштаб, а не перекомпоновывают, чтобы заполнить экран. Добавление значения initial-scale = 1 указывает браузерам устанавливать соотношение 1: 1 между пикселями CSS и пикселями, независимыми от устройства, независимо от ориентации устройства, и позволяет странице использовать всю ширину альбомной ориентации.

Внимание : Чтобы старые браузеры могли правильно анализировать атрибуты, используйте запятую для разделения атрибутов.

Отсутствует тег с шириной или начальным масштабом Аудит Lighthouse может помочь вам автоматизировать процесс проверки правильности использования метатега области просмотра в ваших HTML-документах .

Обеспечьте доступность видового экрана #

Помимо установки начального масштаба , вы также можете установить следующие атрибуты на видовом экране:

• минимальный масштаб
• максимальный масштаб
• пользователь -scalable

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

Размер содержимого в соответствии с областью просмотра #

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

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

Контент имеет неправильный размер для области просмотра. Аудит Lighthouse может помочь вам автоматизировать процесс обнаружения переполненного контента.

Images #

Изображение имеет фиксированные размеры, и если оно больше, чем область просмотра, появится полоса прокрутки.Распространенный способ решения этой проблемы — присвоить всем изображениям максимальную ширину , равную 100% . Это приведет к уменьшению изображения до размера имеющегося в нем пространства, если размер области просмотра будет меньше, чем изображение. Однако, поскольку max-width , а не width составляет 100% , изображение не будет растягиваться больше, чем его естественный размер. Как правило, безопасно добавлять в таблицу стилей следующее, чтобы у вас никогда не было проблем с изображениями, вызывающими полосу прокрутки.

  img {
 max-width: 100%; 
 дисплей: блок; 
}  

Добавьте размеры изображения в элемент img #

При использовании max-width: 100% вы переопределяете естественные размеры изображения, однако вы все равно должны использовать ширину , и высоту в вашем теге . Это связано с тем, что современные браузеры будут использовать эту информацию для резервирования места для изображения перед его загрузкой, это поможет избежать сдвигов макета при загрузке содержимого.

Layout #

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

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

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

Современные методы компоновки CSS, такие как Flexbox, Grid Layout и Multicol, значительно упрощают создание этих гибких сеток.

Flexbox #

Этот метод компоновки идеален, когда у вас есть набор элементов разного размера, и вы хотите, чтобы они удобно помещались в ряд или ряды, при этом меньшие элементы занимают меньше места, а большие — больше.

  .items {
 дисплей: гибкий; 
 justify-content: пробел между; 
}  

В адаптивном дизайне вы можете использовать Flexbox для отображения элементов в виде одной строки или переноса на несколько строк по мере уменьшения доступного пространства.

Подробнее о Flexbox.

CSS Grid Layout #

CSS Grid Layout позволяет легко создавать гибкие сетки. Если мы рассмотрим предыдущий пример с плавающей точкой, вместо того, чтобы создавать наши столбцы с процентами, мы могли бы использовать макет сетки и блок fr , который представляет часть доступного пространства в контейнере.

 . Контейнер {
 дисплей: сетка; 
 сетка-шаблон-столбцы: 1fr 3fr; 
}  

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

Подробнее о CSS Grid Layout

Макет с несколькими столбцами #

Для некоторых типов макета можно использовать макет с несколькими столбцами (Multicol), который может создавать гибкое количество столбцов с помощью свойства column-width .В демонстрации ниже вы можете увидеть, что столбцы добавляются, если есть место для другого столбца 200 пикселей .

Подробнее о Multicol

Иногда вам потребуется внести более серьезные изменения в макет для поддержки определенного размера экрана, чем позволяют описанные выше методы. Вот здесь и пригодятся медиа-запросы.

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

Чтобы предоставить различные стили для печати, вам необходимо настроить таргетинг на тип вывода , чтобы вы могли включить таблицу стилей со стилями печати следующим образом:

   
  
 < head> 
… 
    
… 
  
…  

В качестве альтернативы вы можете включить стили печати в свою основную таблицу стилей с помощью медиа-запроса:

  @media print {
}  

Также можно включить отдельные таблицы стилей в ваш основной файл CSS, используя синтаксис @import , @import url (print.css) печать; , однако это использование не рекомендуется по соображениям производительности. Дополнительные сведения см. В разделе Избегайте импорта CSS.

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

Медиа-запросы на основе размера области просмотра #

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

• ширина ( минимальная ширина , максимальная ширина )
• высота ( минимальная высота , максимальная высота )
• ориентация
• соотношение сторон

Все эти функции имеют отличную поддержку браузером. Для получения дополнительных сведений, включая информацию о поддержке браузера, см. Информацию о ширине, высоте, ориентации и соотношении сторон на MDN.

В спецификацию включены тесты для ширины устройства и высоты устройства . Они устарели, и их следует избегать. device-width и device-height протестированы на фактический размер окна устройства, что было бесполезно на практике, поскольку оно может отличаться от области просмотра, на которую смотрит пользователь, например, если они изменили размер окна браузера.

Медиа-запросы на основе возможностей устройства #

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

• hover
• pointer
• any-hover
• any-pointer

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

Эти новые функции хорошо поддерживаются во всех современных браузерах.Узнайте больше на страницах MDN о наведении, любом наведении, указателе и любом указателе.

Использование

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

Как выбрать точки останова #

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

Выберите основные точки останова, начав с малого, а затем продолжив работу #

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

Давайте рассмотрим пример, который мы видели в начале: прогноз погоды. Первый шаг — сделать так, чтобы прогноз хорошо выглядел на маленьком экране.

Затем измените размер браузера до тех пор, пока между элементами не станет слишком много белого пространства, а прогноз просто не будет выглядеть так хорошо. Решение несколько субъективное, но выше 600px уж точно слишком широка.

Чтобы вставить точку останова на 600 пикселей , создайте два медиа-запроса в конце вашего CSS для компонента, один для использования, когда размер браузера 600 пикселей, и ниже, и один, когда он шире, чем 600 пикселей .

  @media (max-width: 600px) {
} 
 
 @media (min-width: 601px) {
 
} 
  

Наконец, проведите рефакторинг CSS. Внутри медиа-запроса для max-width из 600px добавьте CSS, который предназначен только для маленьких экранов.Внутри медиа-запроса для min-width из 601px добавьте CSS для больших экранов.

При необходимости выбирать второстепенные точки останова #

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

Начнем с оптимизации макета маленького экрана.В этом случае давайте увеличим шрифт, когда ширина области просмотра больше 360 пикселей . Во-вторых, когда есть достаточно места, мы можем разделить высокие и низкие температуры так, чтобы они находились на одной линии, а не поверх друг друга. И давайте также сделаем значки погоды немного крупнее.

  @media (min-width: 360px) {
 body {
 font-size: 1.0em; 
} 
} 
 @media (min-width: 500px) {
 .seven-day-fc .temp-low, 
 .seven-day-fc .temp-high {
 display: inline-block; 
 ширина: 45%; 
} 
 
.seven-day-fc .seven-day-temp {
 маржа слева: 5%; 
} 
 
 .seven-day-fc .icon {
 width: 64px; 
 высота: 64 пикселя; 
} 
} 
  

Аналогично, для больших экранов лучше всего ограничить максимальную ширину панели прогноза, чтобы она не занимала всю ширину экрана.

  @media (min-width: 700px) {
 .weather-прогноз {
 width: 700px; 
} 
}  

Оптимизация текста для чтения #

Классическая теория читабельности предполагает, что идеальный столбец должен содержать от 70 до 80 символов в строке (примерно от 8 до 10 слов на английском языке).Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, подумайте о добавлении точки останова.

Давайте подробнее рассмотрим приведенный выше пример сообщения в блоге. На небольших экранах шрифт Roboto с номером 1em отлично работает, давая 10 слов в строке, но на больших экранах требуется точка останова. В этом случае, если ширина браузера больше 575 пикселей , идеальная ширина содержимого составляет 550 пикселей .

  @media (min-width: 575px) {
 статья {
 width: 550px; 
 левое поле: авто; 
 поле справа: авто; 
} 
}  

Избегайте простого скрытия содержимого #

Будьте осторожны при выборе содержимого для скрытия или отображения в зависимости от размера экрана. Не скрывайте контент просто потому, что вы не можете уместить его на экране. Размер экрана не является окончательным показателем того, чего может желать пользователь. Например, исключение количества пыльцы из прогноза погоды может стать серьезной проблемой для страдающих весенней аллергией, которым нужна информация, чтобы определить, могут ли они выйти на улицу или нет.

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

Чтобы просмотреть страницу с разными точками останова:

Откройте DevTools и включите режим устройства.По умолчанию он открывается в адаптивном режиме.

Чтобы просмотреть свои медиа-запросы, откройте меню «Режим устройства» и выберите «Показать медиа-запросы», чтобы точки останова отображались в виде цветных полос над страницей.

Щелкните одну из полос, чтобы просмотреть свою страницу, пока этот медиа-запрос активен. Щелкните правой кнопкой мыши панель, чтобы перейти к определению медиа-запроса.

Что такое область просмотра? Понимание размеров области просмотра в современном веб-дизайне

Область просмотра — это видимая область веб-сайта на экране пользователя.Этот размер зависит от устройства, поэтому область просмотра будет меньше на планшете, чем на экране компьютера, и снова меньше на мобильном телефоне. На заре разработки веб-сайтов, до появления Интернета на наших телефонах, веб-сайты были предназначены только для экранов компьютеров, с фиксированной шириной и статическим дизайном. По мере того, как просмотр Интернета на мобильных устройствах стал более распространенным, веб-сайты адаптировались к необходимости соответствовать разным размерам экранов, а веб-сайты начали «уменьшаться», чтобы уместить все содержимое страницы в область просмотра.Это «быстрое исправление» было только началом, теперь современные браузеры позволяют использовать код для разработки веб-сайтов, обычно называемых адаптивным веб-сайтом.

Настройка области просмотра

Когда появился HTML5, мы представили решение, позволяющее веб-разработчикам контролировать область просмотра с помощью тега.

Если вы разрабатываете адаптивный веб-сайт, вы всегда должны включать следующий элемент области просмотра:

Этот элемент области просмотра указывает браузеру, как управлять размерами и масштабированием страницы.

Часть width = device-width указывает, что ширина страницы будет шириной экрана устройства, которая зависит от размера устройства, на котором просматривается веб-сайт.

Когда страница впервые загружается браузером, часть initial-scale = 1.0 устанавливает начальный уровень масштабирования.

Размер вашего контента в области просмотра

В современном пользовательском интерфейсе пользователи привыкли к вертикальной прокрутке веб-сайтов (привет, новостная лента Facebook), но горизонтальная прокрутка встречается нечасто.Если пользователь вынужден уменьшить масштаб для просмотра содержимого или если ему нужно неестественно прокручивать по горизонтали для просмотра скрытого содержимого, это считается неудовлетворительным для пользователя интерфейсом.

Придерживайтесь этих полезных правил, чтобы создавать более адаптивные веб-сайты:

1. Прекратите использовать большие элементы фиксированной ширины — , если ширина изображения или div установлена ​​шире, чем область просмотра, пользователю придется прокручивать по горизонтали. Попробуйте использовать процентную ширину, например width: 100%, чтобы уместить содержимое в области просмотра.

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

3. Попробуйте медиа-запросы CSS, чтобы применить альтернативный стиль для видовых экранов разного размера. — Никогда не используйте большие абсолютные значения позиции и будьте осторожны с большой шириной CSS для элементов страницы. Попробуйте использовать процентную ширину, чтобы контент автоматически соответствовал разным размерам области просмотра.

Включить адаптивные макеты с метатегом области просмотра

Гибкие и гибкие макеты, например, основанные на процентах, а не на пикселях, отлично подходят для рендеринга веб-страниц на основе столбцов на мониторах различных размеров и даже на больших планшетах. Однако, если человек просматривает такую ​​страницу на экране гораздо меньшего размера, например на экране смартфона, он получит горизонтальные полосы прокрутки. Это связано с тем, что разрешение устройства намного больше, чем ширина устройства, фактически ближе к разрешению традиционного настольного монитора или ноутбука.В результате человек, просматривающий страницу, должен перемещать и масштабировать, чтобы получить доступ к содержимому страницы. Экран телефона служит просто «окном просмотра», через которое человек может просматривать веб-страницу с более высоким разрешением, чем размеры устройства.

Для веб-дизайнера, который, например, установил внешний контейнер на 90%, это соблюдается. Однако результат для нас и других пользователей все еще не идеален (то есть эти ужасные горизонтальные полосы прокрутки). Мы хотим, чтобы браузер смартфона отображал страницу с шириной устройства, а не с большим разрешением.Для этого нам нужно поместить метатег области просмотра в заголовок наших HTML-страниц и указать для него некоторые конкретные значения.

Это важный шаг в процессе создания адаптивной темы Drupal; потому что, пока это не будет сделано, мы не увидим отдачи от нашей гибкой компоновки и не сможем продвигаться вперед с другими стратегиями адаптивного дизайна, такими как реализация медиа-запросов для предоставления различных макетов с разными размерами области просмотра.

Это руководство, основанное на бесплатном видео «Добавление метатега области просмотра в html».tpl.php, ожидается, что у вас есть базовое или среднее понимание:

• Работа с файлами сайта Drupal и их редактирование (т. Е. Копирование файлов, навигация по файлам вашего сайта, редактирование и сохранение файла)
• Основы работы с файлами шаблонов в теме Drupal
• Как найти элемент заголовка в документе HTML

Руки на руках

1. Проверьте, есть ли в вашей теме файл шаблона html.tpl.php . В своей файловой системе перейдите к sites / all / YOUR_THEME и проверьте, есть ли html.tpl.php файл уже существует.
2. (пропустите этот шаг, если в вашей теме уже есть файл html.tpl.php.) В файловой системе перейдите в корень вашего сайта Drupal. Скопируйте modules / system / html.tpl.php и вставьте в корневой каталог своей темы. Например, моя тема называется «responseiverobots», поэтому я скопировал modules / system / html.tpl.php на сайты / all / themes / responseiverobots / html.tpl.php . (Если в вашей теме есть подкаталог «шаблоны», то поместите его в этот каталог.)
3. Откройте файл sites / all / themes / YOUR_THEME / html.tpl.php в любом текстовом редакторе.
4. Скопируйте и вставьте эту строку в файл темы html.tpl.php внутри тега :
   
5. Очистите кеш Drupal. (В административном меню перейдите в Конфигурация> Производительность> (admin / config / development / performance) и нажмите кнопку с надписью «Очистить все кеши» или запустите drush cc all в интерфейсе командной строки, если у вас установлен drush. ).
6. Протестируйте свой сайт в мобильном эмуляторе Chrome или на смартфоне. Откройте свой сайт в Chrome, щелкните правой кнопкой мыши и выберите «Проверить элемент». Щелкните значок мобильного телефона в левом верхнем углу инспектора.
   

Включение адаптивных макетов с шириной устройства

Внутри атрибута содержимого метатега области просмотра width = device-width сообщает мобильному браузеру, как обрабатывать размер области просмотра. Вместо того, чтобы принимать широкую ширину, например, 1280 пикселей, вызывая горизонтальные полосы прокрутки и заставляя пользователя перемещаться и прокручивать для просмотра всего содержимого на странице, этот метатег области просмотра сообщает мобильному браузеру, что ширина области просмотра должна быть равной размер устройства независимо от книжной или альбомной ориентации.

Направляя браузеры, особенно мобильные, использовать ширину устройства, теперь мы можем создавать медиа-запросы и изменять наши макеты и складывать наши столбцы так, чтобы контент можно было просматривать в одном вертикальном столбце, а не панорамировать страницу по горизонтали. Ширина нашей области относительно размера теперь будет относиться к ширине устройства, а не к гораздо большему разрешению мобильного браузера по умолчанию. Теперь наш мобильный экран будет рассматриваться как маленький экран, а не просто окно или «область просмотра» в гораздо более широком контексте.

В этом руководстве вы узнали, как включить адаптивные макеты в своей теме, добавив метатег области просмотра в файл шаблона html. Для получения дополнительной информации и демонстрации посмотрите бесплатное видео «Добавление метатега области просмотра к html.tpl.php» в серии «Начало работы с адаптивным веб-дизайном в Drupal», теперь на Drupalize.Me.

HTML | Мета-тег области просмотра для адаптивного веб-дизайна

< html >

< head >

< title > GeeksforGeeks title >

< meta charset = «utf-8» name = «viewport»

content = "width = device-width, initial-scale = 1.0 " >

< style >

.gfg {

font-size: 40px;

font-weight: bold ;

цвет: зеленый;

выравнивание текста: по центру;

}

.компьютерные фанаты {

font-size: 17px;

выравнивание текста: по центру;

}

p {

выравнивание текста: выравнивание по ширине;

}

стиль >

головка >

< корпус >

< div class = "gfg" > GeeksforGeeks div >

< div class = " geeks " > Портал информатики для вундеркиндов div >

< p > Подготовьтесь к набору персонала таких компаний, как

Microsoft, Amazon, Adobe и т. Д. Wi й бесплатный онлайн-курс подготовки к размещению

курс.Курс фокусируется на различных вопросах MCQ и кодировании, которые, вероятно, будут задаваться в ходе собеседований

и сделать ваш предстоящий сезон размещения

эффективным и успешным. p >

< p > Обширная серия онлайн-тестов для GATE 2019 для повышения уровня подготовки

к претендентам GATE 2019.Серия испытаний

разработана с учетом образца бумаги GATE предыдущих лет и гарантирует соответствие

стандарту GATE. Эта серия тестов поможет кандидатам

отслеживать и улучшать подготовку с помощью вопросов

различных уровней сложности. Будет две серии тестов

, охватывающих весь учебный план GATE, включая математику и

Aptitude.Тестовая серия I будет охватывать базовую и среднюю сложность,

, тогда как в тестовой серии II сложность будет немного выше. p >

body >

html >

Адаптивный веб-дизайн - разрешение устройства и ширина области просмотра. | by Sakthivel Sekar

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

 // Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше) 
 @media (min-width: 576px) {...} // Средние устройства (планшеты, 768px и выше) 
 @media (min-width: 768px) {...} // Большие устройства (настольные компьютеры, 992 пикселей и выше) 
 @media (min-width: 992px) {...} // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше) 
 @media (min- width: 1200px) {...} 

 @media (min-width: 576px) {
 ... 
} 

 2560/2 = 1280 
 1600/6 = 800 

 1680 x 1050 
 1440 x 900 
 1024 x 640