Viewport

Не тот стандарт, который вы искали

Мета тег viewport был решением проблемы для Apple. Он был быстро подхвачен другими платформами, но никогда W3C. Microsoft сделала это известным, когда при определенных обстоятельствах в IE10 они отказались считывать этот тег. Вместо этого они использовали Адаптацию под девайсы CSS, на чем настаивала W3С.

Вкратце, это задавание свойств viewport через вместо HTML.

Ну или в соответствие с нашим новым правилом не задавать ширину девайса, мы можем сделать следующее:

IE10 требует префиксов, которые выглядят так:

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

Здесь это очень важно

Прочитайте больше об этом  в посте Тима Кадлека IE10: режим Snap и адаптивный дизайн.

Значение viewport атрибута name

lass=»content_div»>

Отдельно хотелось бы обратить внимание на значение «viewport» атрибута
name, которое указывает браузеру мобильного устройства, как обрабатывать размеры страницы и изменять ее
масштаб, а также соответствующий ряд значений атрибута content (см. пример №2):

  • «width» – значение задает ширину области просмотра и через знак равно в качестве значений принимает:

    • device-width — ширина области просмотра будет подстраиваться под ширину экрана (значение подходит для
      большинства случаев);
    • аппаратно-независимые пиксели — задается фиксированная ширина области просмотра в
      аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 200px —
      10 000px (фиксированную ширину применять не рекомендуется!);
  • «height» – значение задает высоту области просмотра (используется редко) и через знак равно в
    качестве значений принимает:

    • device-height — высота области просмотра будет подстраиваться под высоту экрана
      (значение подходит для большинства случаев);
    • аппаратно-независимые пиксели — задается фиксированная высота области просмотра в
      аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 223px —
      10 000px (фиксированную высоту применять не рекомендуется!);
  • «initial-scale» – устанавливает соответствие для пикселей CSS
    (это те пиксели, которые мы задаем в таблицах стилей) и аппаратно-независимых пикселей мобильного устройства (это виртуальные пиксели,
    которые являются результатом масштабирования аппаратных (физических) пикселей устройства, их величина примерно одинакова для всех устройств);
    проще говоря, свойство устанавливает стартовую величину масштабирования страницы; в качестве значения через знак равно принимаются числа от
    0.1 до 10 (чем больше число, тем больше масштаб, т.е. увеличение страницы),
    например, «initial-scale=2» можно рассматривать, как увеличение масштаба страницы в два раза;
  • «user-scalable» – разрешает либо запрещает пользователю изменять масштаб страницы; в качестве значения
    через знак равно принимает yes либо no (масштабирование в ряде случаев
    целесообразно запрещать, например, для мобильных приложений).

Отметим, что нами не были перечислены значения minimum-scale и maximum-scale
атрибута content, т.к. их использование нежелательно.

Элементы 'meta' и его атрибуты
  Тут расположена выводимая информация.


Пример №2 Использование name=»viewport» тега meta

Как видно из примера, значения атрибута content обычно перечисляются через запятую, а не записываются в
отдельных элементах ‘meta’.

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

How to configure the mobile viewport for your site

There are three main ways to design a mobile-friendly site depending on your current mobile site design: Dynamic, Separate URL and Responsive design.

Dynamic design configuration

If you currently have a dynamic design, you’re required to build an entire separate page to serve different versions and tell each user agent what they should access from the same URL. You will have to use the Vary HTTP header on the page. Below is an example of how to create that request:

Here’s more information regarding dynamic design configuration.

Separate URLs configuration

Separate URLS call for more development resources and also requires you to build a whole new site and host it on a subdomain like www.m.example.com. To help search engines understand separate mobile URLs, you’ll need to create annotations for both desktop www.example.com and mobile www.m.example.com devices.

Here are examples of how to annotate each URL:

On the desktop page (http://www.example.com/page-1), add:

and on the mobile page (http://m.example.com/page-1), the required annotation should be:

This rel=”canonical” tag on the mobile URL pointing to the desktop page is required.

Sitemap annotation needs to include the following:

Here’s more information on separate url configuration.

Responsive design configuration

Responsive design is the easiest and most effective way to create a website  recommended by Google. The viewport configuration must make the page load with a width matching the device screen width, like so:

A viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

Adding the width=device-width code will ensure the page is resized to match the screen’s width, which will also vary depending on the user’s device.

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

After setting a page’s viewport, the next step should be to size the page’s content. Here’s an example of a mobile-friendly viewport that adjusted its content according to the user’s display:

In this example, if viewport has been disabled or configured to only desktop, you will need to move it sideways or pinch-to-zoom to view the whole site on the device.

Атрибуты name и http-equiv тега

Атрибут content используется в паре не только с атрибутом name, но и
с атрибутом http-equiv, который применяется для конвертирования метатега в заголовок
HTTP. Заголовки представляют собой текстовые строки, которые используются при обмене сообщениями браузера с сервером
и состоят из пар ‘имя: значение’ (разделяются двоеточием). Сам атрибут http-equiv
задает имя пары, аналогично атрибуту name, а атрибут content, соответственно,
значение пары: . Однако в одном элементе
‘meta’ допускается использовать только один из атрибутов: или name или
http-equiv. Браузеры преобразовывают значение атрибута http-equiv, заданное с
помощью атрибута content, в формат заголовка HTTP-ответа и обрабатывают их так,
как будто они прибыли непосредственно от сервера. Подробно рассматривать HTTP-заголовки мы будем в процессе изучения
HTTP-протокола, JavaScript, PHP, когда будем
организовывать взаимодействие браузера пользователя с сервером, выдающего ему веб-страницы. Пока же будем иметь в виду, что есть такой атрибут
http-equiv элемента ‘meta’, в котором такие заголовки используются.

Мета тег viewport

Посмотрите на созданный Apple, а затем адаптированный и развитый другими людьми.

Выглядит он так:

В поле вы можете ввести множество значений, разделенных запятой, но мы остановимся на главных.

Например, если ваш мобильный дизайн шире 320px, вы можете задать ширину viewport:

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

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

Это позволит убедиться наверняка, что перед открытием страницы ваш дизайн будет отображен с правильным масштабированием 1:1. Никакое приближение не применится. Вы можете пойти дальше и вообще запретить пользователя приближать страницу:

Примечание: перед применением параметра maximum-scale подумайте, действительно ли вам нужно запрещать пользователю приближать контент на вашей странице. Смогут ли они легкодоступно прочитать все содержимое?

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the
tag.

You should include the following viewport element in all your web pages:

A viewport element gives the browser instructions on how
to control the page’s dimensions and scaling.

The part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the
viewport meta tag

With the
viewport meta tag

Изменения в iOS 11

Поведение вьюпорта по умолчанию в iOS 11 на iPhone 8

Отличие iOS 11 от более ранних версий состоит в том, что контент WebView теперь учитывает безопасные зоны. Это значит, что если имеется фиксированная панель навигации со свойством , то она по умолчанию отрисуется на ниже верхнего края экрана — выровненная по нижнему краю статус-бара. При прокрутке вниз она сдвинется наверх, под статус-бар. При прокрутке вверх она снова выпадет прямо под статус-баром (оставляя нелепый зазор в , через который проглядывает контент).

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

Очень странное поведение скролла в iOS 11 для элементов с фиксированным позиционированием

Events

Orientation Change

– https://github.com/gajus/orientationchangeend

This is proxy for your convenience to perform operations that must follow the change of the device orientation and in the context of updated viewport tag. This is required when determining the view state.

scream.on('orientationchangeend', () => {
    // Invoked after the orientation change and the associated animation (iOS) has been completed.
});

View Change

Invoked on page load and when view changes.

scream.on('viewchange', (e) => {
    // @var {String} 'full', 'minimal'
    e.viewName;
});

Unregister the event

The method returns a object that you can use to unregister your event handler calling the method .

const listener = scream.on('viewchange', (e) => { /* your code */ });

// to unregister:

scream.off(listener);

iPhone X

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

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

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

На iPhone X уже появляется проблема, даже при том же значении у свойства

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

Примечание: iOS 11 использует синтаксис с , но последующие версии операционной системы будут поддерживать только !

Четыре константы для управления раскладкой безопасных зон — это:

  • : значение отступа безопасной зоны (в CSS-пикселах), считая от верхнего края вьюпорта.
  • : значение отступа безопасной зоны (в CSS-пикселах), считая от нижнего края вьюпорта.
  • : значение отступа безопасной зоны (в CSS-пикселах), считая от левого края вьюпорта.
  • : значение отступа безопасной зоны (в CSS-пикселах), считая от правого края вьюпорта.

И, в качестве последнего подарка для нас, Apple портировало эти переменные для UIWebView.

Minimal View

This functionality is iOS 8 specific. It has been developed as part of Brim to bring back the minimal-ui.

/**
 * Returns dimensions of the usable viewport in the minimal view relative to the current viewport width and orientation.
 *
 * @return {Object} dimensions
 * @return {Number} dimensions.width
 * @return {Number} dimensions.height
 */
scream.getMinimalViewSize();

/**
 * Returns true if screen is in "minimal" UI.
 *
 * iOS 8 has removed the minimal-ui viewport property.
 * Nevertheless, user can enter minimal-ui using touch-drag-down gesture.
 * This method is used to detect if user is in minimal-ui view.
 *
 * In case of orientation change, the state of the view can be accurately
 * determined only after orientationchangeend event.
 *
 * @return {Boolean}
 */
scream.isMinimalView();

Премиум опции

Этот урок научит вас как использовать мета тег viewport самим, но если вам нужна помощь в создании адаптивного сайта, вам могут помочь наши дизайнеры в рамках Envato Studio. Вот наилучшие варианты:

1. Responsive Website Design & Development

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

Вы получите:

  • Стильный дизайн
  • Полностью редактируемый и масштабируемый PSD файл
  • HTML5, CSS3, JavaScript, CMS
  • Адаптивный дизайн

2. Custom & Responsive Website Design

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

  • Дизайн домашней страницы на готовой Bootstrap сетке
  • 3 дополнительные страницы (О нас, Контакты, Вопросы и т.д.)
  • Подменю и эффекты при наведении мыши на кнопки для ваших разработчиков
  • Отлично структурированные слои

3. Responsive One-Page Website Design

Этот человек полностью на фрилансе, с 12 годами профессионального опыта в веб-дизайне, графическом дизайне и дизайне UX/UI интрефейсов.

Вы получите стильный адаптивный одностраничник.

Если вам никто не подошел, либо же вы хотите научиться всему сами, читайте дальше.

Managing the Viewport

Configure management and dimensions of the viewport at the time of the initialization:

import Scream from 'scream';

const scream = Scream({
    viewport true,
    width {
        portrait screen.width,
        landscape screen.height
    }
});

If enabled, scream generates the meta tag to reflect the present orientation and in response to the event.

meta name="viewport" content="width={width},initial-scale={scale},minimum-scale={scale},maximum-scale={scale},user-scale=0">
  • the width set in the configuration for the current orientation.
  • calculated scale needed to fit the document in the screen.

Configuration

Name Description Default
Manage the viewport of the page.
Viewport width in the portrait orientation. ()
Viewport width in the landscape orientation. ()

Safe Area Insert

With the introduction of devices with a notch, there is now the concept of and as explained here:

This adds additional complexity as applying the viewport width needed for the minimal view calculation can cause content to clash with the notch in landscape mode. It is possible to calculate the padding required to prevent this clash in JavaScript but this only works if is set and this may have an undesirable effect on the layout of the page.

Scream attempts to calculate the notch padding by first adding to the viewport and then replacing it with the width of the safe area. This works well in most cases but may be undesirable if the notch has already been taken into account in the page design. In this case, it is recommended to manage the viewport tag manually by setting and applying the relevant padding with CSS.

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.

Атрибут charset тега

Со служебным тегом
(от англ. metadata – метаданные)
мы уже кратко знакомились. Он формирует пустой элемент разметки ‘meta’, который используется для хранения метаданных.

Для сообщения браузеру кодировки документа применяется атрибут charset.
О кодировках мы будем говорить отдельно, пока следует запомнить, что если кодировку не задать, то документ может быть не правильно отображен.
Поэтому в процессе верстки нужно всегда использовать элемент ‘meta’ и указывать в нем атрибут
charset=»utf-8″. В случае необходимости, разрешается использовать более одного элемента
‘meta’, но атрибут charset должен задаваться только один раз в одном из элементов
‘meta’.

Viewport best practices

In order to ensure that a page is showcased in a mobile-friendly way, here are some tips you can follow:

Avoid rendering the page to a specific width, since widths may vary from one device to another.

Avoid using absolute width values in your CSS, such as cm, mm, in, px, pt, or pc. Instead, use rather relative width values like em, ex, ch, rem, vw, vh vmin, vmax, and %. Using absolute values can cause the elements of your site to load wider than your viewport allows.

Manually test your site responsiveness and viewport readiness

Simplest and the quickest way to identify how your site looks on different devices is to create your SEOptimer report and review the Device Rendering section of the report:

You’ll want to test your site with either your own device or by using Chrome “Inspect” in order to  view how your site appears based on the variety of devices provided by Google. Note that using the Chrome browser does not let you drag your screen left to right or use pinch-to-zoom.

Once you  start viewing your site, drag the right side to change the width and see how well your site is designed for mobile users.

You can also select popular devices and determine if each device is being displayed  correctly.

Want more devices? Depending on your site needs, you can determine what devices your site encounters most in Google Analytics.

You can also go to Audience > Mobile > Devices and find the most popular devices being used to view your site.

If the devices listed are not based on the most popular devices out there currently, you can locate the device by name or add custom devices based on the pixel ratio.

To add a custom device:

Go to DevTools Settings > Devices > Add custom device.

Then enter a device name, width, height, device pixel ratio, and user agent string.

Атрибуты name и content тега

lass=»content_div»>

Имеются у элемента ‘meta’ и другие атрибуты. Так
атрибут name задает имя (регистронезависимое) для пары
‘имя=значение’. Используется совместно с
атрибутом content, который, соответственно, устанавливает значение для данной
пары. Разрешается указывать в одном атрибуте content сразу несколько значений, перечисленных через запятую или точку
с запятой. Короче, при помощи этих двух атрибутов задается пара ‘имя=значение’, которая определяется в следующем
формате: .

Перечислим некоторые из имен, задаваемых атрибутом name, и соответствующих им значений, указываемых в атрибуте
content:

«author» – в атрибуте content указывается имя автора;

«copyright» – если страница разрабатывалась организацией, то авторство обычно не указывается,
а используется название организации;

«description» – когда атрибут name имеет такое значение, в атрибуте
content приводится краткое описание страницы, которое используется поисковыми машинами для индексации, а
также выводе ими аннотации при выдаче по запросу;

«document-state» – для этого имени атрибут content
может принимать два значения: «static» и «dynamic»; в первом случае поисковым
машинам сообщается, что документ нужно индексировать только один раз и нет необходимости в индексации в дальнейшем; во втором случае от поисковых
машин требуется постоянная индексация веб-страницы;

«robots» – для этого имени используется ряд значений атрибута content:

«index» – роботам разрешается индексировать данную страницу;

«noindex» – роботам запрещается индексировать данную страницу; при этом она не попадает
в базу поисковой машины и, соответственно, её невозможно будет найти через поисковую систему;

«follow» – роботам разрешается переходить по ссылкам на данной странице;

«nofollow» – роботам запрещается переходить по ссылкам на данной странице; кроме того,
ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PageRank
(определяет ‘важность’ страницы);

«noarchive» – роботам запрещается кешировать данную страницу;

«revisit» – используется для управления частотой индексации веб-страницы в поисковой системе;
например, для переиндексации страницы раз в три недели в качестве значения атрибута content следует
указать «21»;

«url» – для этого имени атрибут content
принимает в качестве значения адрес, по которому робот поисковой системы перенаправляется на другую страницу; это нужно для отмены индексации
‘зеркала’ и генерируемых страниц.

Код с использованием элементов ‘meta’ и его атрибутов показан в примере №1

Пример №1
	...
	Тут расположена выводимая информация.	
	...


Пример №1. Использование элемента ‘meta’ и его атрибутов

Поддержка браузерами

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

Пока что к правилу  необходимо добавлять вендорный префикс:

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

Конечно же, нам до сих пор необходимо включать мета-тег в html страницу, т.к. в ближайшее время он никуда не денется. Но уже не так страшно смотреть в будущее – добавление правила всего лишь делает наши сайты и приложения future-friendly.

Оригинал: http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport

Заключение

А
´Ã°Ã¿ÃÂøòýÃÂù òõñ-ôø÷ðùý ýõ ÃÂþûÃÂúþ ôûàÃÂõÃÂ, úÃÂþ ûÃÂñøàÃÂÃÂöðÃÂàø ÃÂðÃÂÃÂøÃÂÃÂÃÂàþúýþ ÃÂòþõóþ ñÃÂðÃÂ÷õÃÂð, þý ÃÂúþÃÂõõ þ ôþÃÂÃÂÃÂÿýþÃÂÃÂø ýð úðú üþöýþ ñþûÃÂÃÂõü úþûøÃÂõÃÂÃÂòõ ÃÂÃÂÃÂÃÂþùÃÂÃÂò ø ÃÂð÷ÃÂõÃÂõýøù! çõÃÂõ÷ üõÃÂð ÃÂõó viewport ò òðÃÂõü ÃÂûõüõýÃÂõ

ÃÂðûÃÂýõùÃÂõõ ÃÂÃÂõýøõ

  • 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

ÃÂþÃÂþòÃÂõ ÃÂõÃÂõýøÃÂ

ÃÂàüþöõÃÂõ ýðùÃÂø üýþöõÃÂÃÂòþ òÃÂÃÂúþúðÃÂõÃÂÃÂòõýýÃÂàðôðÿÃÂøòýÃÂàÃÂõü ø ÃÂðñûþýþò ýð ThemForest, ð ÃÂðúöõ þóÃÂþüýþõ úþûøÃÂõÃÂÃÂòþ ÃÂýøÿÿõÃÂþò ø ÿûðóøýþò ò ÃÂð÷ôõûõ «responsive» ýð CodeCanyon.

Ссылка на основную публикацию