Quick tip: don’t forget the viewport meta tag

How to configure mobile viewport in WordPress

Most themes in WordPress should already have viewport and be mobile responsive. If SEOptimer detected that your WordPress theme does not have a viewport, the best method is to verify it within your WordPress theme.


You’ll need to go to Appearance > Editor > Header.php to do so.

The header.php file should include:

or

If you do not currently have viewport in the header.php file and you’ve already done the responsive check, check with your theme developer.

If accessing header.php seems too technical, you can install the “Insert Headers and Footers” plugin from WordPress and enter the viewport in the header section.

Сначала мобильные

Один из популярных методов использования медиа-запросов называется «сначала мобильные». Данный подход включает в себя использование стилей, ориентированных на более мелкие экраны как стили по умолчанию для сайта, а затем использование медиа-запросов, чтобы добавить стили по мере роста экрана.

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

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

Контрольные точки медиа-запросов с учётом «сначала мобильные» могут выглядеть следующим образом.

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

Демонстрация

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

Сначала мобильные

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

Что такое 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 в неадаптивном шаблоне

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

Пример

Посмотрите на сайт Themify с мобильного устройства.

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

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

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

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

Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.

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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

The Viewport Meta Tag

Enter the , introduced by Apple, then adopted and developed further by others.

It looks like this:

Within the you can enter a load of comma delimited values, but we’re going to to focus on the fundamental ones for now.

For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:

For flexible layouts it’s more practical to base your viewport width on the device in question, so to match your layout width to the device width you’d enter:

To be extra certain that your layout will be displayed as you intended it you can also set the zoom level. This, for example:

..will ensure that upon opening, your layout will be displayed properly at 1:1 scale. No zooming will be applied. You could even go further and prevent any zooming by the user:

Note: Before applying the maximum-scale parameter, consider whether you should really be preventing your users from zooming in. Can they read everything as well as possible?

Отзывчивая типографика

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

Такое резкое масштабирование явно не подходит для повседневного использования. Нам нужно что-то более тонкое — минимальные и максимальные значения. Также нужно больше контроля над диапазонами увеличения показателя. Тут нам поможет функция calc(). Для определения базового размера шрифта мы можем использовать более стабильные единицы (скажем, 16px). Мы также можем уменьшить диапазон подстраивания значения под размер области просмотра (0.5vw). Таким образом, браузер будет выполнять следующие математические вычисления: calc(16px + 0.5vw)


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

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

Тут я поняла, что было бы здорово, если бы существовало такое свойство, как max-font-size.

Наши коллеги разработали более сложные расчеты и миксины Sass для определения точных диапазонов масштабирования размера текста через конкретные медиа-запросы. Есть несколько статей на CSS Tricks, в которых объясняется этот метод. Там же представлены фрагменты кода, которые помогут попробовать его в деле.

Я думаю, в большинстве случаев это излишне, но у вас может быть другое мнение.

Getting Started

First, as with getting all websites to become responsive and adhere to media queries, the viewport tag must be placed in the section of your web page. The basic standard version of this is shown below.

Once we have this snippet of code in our webpage, if we view the page with different devices, the different media queries will be able to have the correct effect. Without this, viewing the page in the specific device would basically just display a zoomed-out version of your page; it would be attempting to cram your entire website into its 320px wide display. Not good for you or your users! Users don’t like having to zoom to view your website’s content, and they certainly don’t want to deal with the vertical scrolling that would result.

For example, let’s take the iPhone 4, which has a . Without the tag in place, your attempt at media queries would go horribly wrong and it would incorrectly reference the default viewport. Most mobile media queries target around 500px or under. This is usually accomplished by a simple media query. Without the tag, you wouldn’t see this query take effect, since the iPhone 4 would still be displaying the 980px width version of your website. Take a look at the below example:

There are two demo links with accompanying screenshots below, taken using an iPhone 4. Both pages have the above CSS, but one uses the viewport tag while the other does not. Please note that if you test the demos, you need to test on a small mobile device to see the correct results.

The above page did not have the tag and, as a result, the background is red and is emulating the 980px wide default layout viewport instead of using the 500px mobile media query!

Now the meta tag is in place and iOS is correctly showing the page how we want it: It’s based on the 320px width and allowing our media queries to work the way we expect it to.

Viewport basics

A typical mobile-optimized site contains something like the following:

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width , which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale , minimum-scale , and user-scalable properties control how users are allowed to zoom the page in or out.

What About “width”?

I’m of the opinion, along with many other seasoned developers, that having a fully responsive page that behaves as expected throughout all possible screen sizes is the easiest and most beneficial way to go about getting the most effective layouts on all devices.

To build a fully responsive and fluid page, the developer simply has to ensure that all viewports are accounted for and the page restructures and resizes as needed to suit the content and the design.

All you need for a fully responsive web page is a fluid website, and some well targeted media queries to target the normal range of mobile devices, tablet devices, and desktop+ viewports. I prefer using Foundation’s Media Queries, which I find to be quite accurate and encompasses all the necessary viewports.

Of course, like anything in development, using width-based queries alone is not a solution to all layout bugs. It likely will still be necessary to test on individual mobile devices for random bugs and rendering quirks, But as far as seeing how the different mobile devices will look, it’s as easy as taking your browser window and resizing it.

For testing, I use the Chrome extension Responsive Web Design Tester. It lets you select a specific device and you’ll see the device size and the way your page will display in that device.


One more quick benefit I’d like to add is that using width-based queries ensures future devices will still display the website fine. It’s essentially future-proof, because you’re targeting something that’s universal — the general viewport size — not something that’s specific to the device.

Conclusion

Responsive web design isn’t just for people who enjoy watching their browsers grow and shrink, it’s about catering for as many different devices, screens and resolutions as possible! Throw the viewport meta tag into your , plus the @viewport rule into your CSS when you’re building flexible layouts and you’re good to go.

Further Reading

  • Apple documentation:
  • Mozilla: Using the viewport meta tag to control layout on mobile browsers
  • quirksmode.org: A tale of two viewports
  • w3.org Mobile Web Application Best Practices:
  • Quick Tip: Never use maximum-scale=1.0 on the A11y Project
  • Tim Kadlec explains IE10 Snap Mode and Responsive Design
  • proposal

Ready-Made Solutions

You can also find thousands of high-quality responsive themes and templates on ThemeForest, and a huge range of scripts, plugins and add-ons in the «responsive» category on CodeCanyon. 

Улучшение отзывчивости с помощью медиазапросов CSS

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

TL;DR

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

Например, вы можете поместить в медиазапрос print все стили, необходимые для печати:

Кроме использования атрибут media в ссылке на таблицу стилей существует ещё два способа применить медиазапросы @media и @import, которые можно встроить в файл CSS: Приоритет отдается первым двум методам, более эффективным, чем синтаксис @import (см. Избегайте правила @import).

Логика медиазапросов не является взаимоисключающей, поэтому к блоку CSS применяются все фильтры, отвечающие его критериям. Порядок применения фильтров обусловлен стандартными правилами CSS.

Применение медиазапросов на основе размера области просмотра

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

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

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

Рассмотрим пример:

<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) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>
  • При ширине браузера от 0 пикс. до 640 пикс. применяется max-640px.css.
  • При ширине браузера от 500 пикс. до 600 пикс. применяются стили из @media.
  • При ширине браузера от 640 пикс. и выше применяется min-640px.css.
  • Если в браузере ширина больше высоты, применяется landscape.css.
  • Если в браузере высота больше ширины, применяется portrait.css.

Примечание к min-device-width

Также возможно создание запросов на основании *-device-width, хотя делать это настоятельно не рекомендуется.

Разница небольшая, но очень важная: min-width исходит из размера окна браузера, а min-device-width — из размера экрана устройства. К сожалению, некоторые браузеры (включая устаревшую версию браузера для Android) не всегда правильно определяют ширину области просмотра и вместо нее могут сообщить размер экрана в пикселях устройства.

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

Использование относительных единиц

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

Например, установка параметра width равным 100% для блока div верхнего уровня приведет к тому, что он будет заполнять всю ширину области просмотра и никогда не будет слишком мал или велик для нее. Блок div в любом случае будет соответствовать экрану, будь то iPhone (320 пикс.), Blackberry Z10 (342 пикс.) или Nexus 5 (360 пикс.).

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

Not recommended — fixed width

Recommended — responsive width


С этим читают