Viewport
========

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

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

Meta-тег **viewport** сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию HEAD.

**Пример**:


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

### Атрибуты метатега viewport

Meta-тег **viewport** может иметь следующие атрибуты, указанные через запятую (`,`):

**width** – ширина области просмотра.

Значением атрибута является целое неотрицательное число от **200** до **10000** пикселей или константа **device-width**, которая задаёт ширину страницы в соответствии с размером экрана.

Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

> 
> **Примечание**: для сайтов с адаптивным дизайном рекомендуется использовать: `width=device-width`.
> 
> 
> 

**height** – высота области просмотра.

Значением атрибута является целое неотрицательное число от **233** до **10000** пикселей или константа **device-height**, которая задаёт высоту страницы в соответствии с размером экрана.

> 
> **Примечание**: если указан атрибут **width**, указывать атрибут **height** не обязательно.
> 
> 
> 

**initial-scale** – начальный масштаб страницы.

Значением атрибута является вещественное число от **0.1** до **1.0**. Значение **1.0** определяет масштаб **1:1**, т.е. «не масштабировать».

> 
> **Примечание**: в некоторых операционных системах (iOS, Windows Phone и т.д.) ширина страницы, при повороте, остаётся неизменной. Вместо перераспределения контента выполняется его масштабирование. Поэтому рекомендуется использовать: **initial-scale=1.0**.
> 
> 
> 

**user-scalable** – доступность масштабирования страницы пользователем.

Значение атрибута является логическое «**yes**» (`1`) – можно масштабировать или «**no**» (`0`)– нельзя масштабировать.

> 
> **Примечание**: рекомендуется использовать значение «**yes**» , а т.к. оно установлено по умолчанию, то **user-scalable** можно и не указывать.
> 
> 
> 

**minimum-scale** – минимальный масштаб области просмотра.

Значением атрибута является вещественное число от **0.1** до **1.0**. В мобильном браузере Safari по умолчанию 0.25. Значение **1.0** определяет масштаб **1:1**, т.е. «не масштабировать».

**maximum-scale** – максимальный масштаб области просмотра.

Значением атрибута является вещественное число от **0.1** до **1.0** . В мобильном браузере Safari по умолчанию 1.6. Значение **1.0** определяет масштаб **1:1**, т.е. «не масштабировать».

> 
> **Примечание**: избегайте атрибутов **user-scalable**, **minimum-scale** и **maximum-scale**, т.к. они отрицательно сказываются на доступности содержания.
> 
> 
> 

Дополнительные и полезные метатеги
----------------------------------

Meta-тег **HandheldFriendly** определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry, в таком браузере как AvantGo. Сейчас распознаётся и многими другими мобильными браузерами.

**Пример**:


```html
<meta name="HandheldFriendly" content="true" />
```


Meta-тег **MobileOptimized** (http://goo.gl/ZpLjZz) задаёт ширину области просмотра в мобильных браузеров IE Mobile или Pocket IE. Является аналогом атрибута **width** в meta-теге **viewport**.

**Пример**:


```html
<!-- фиксированная ширина в 320 пикселей -->
<meta name="MobileOptimized" content="320" />
<!-- ширина страницы в соответствии с размером экрана, аналог device-width -->
<meta name="MobileOptimized" content="width" />
```


Meta-тег **apple-mobile-web-app-capable** (http://goo.gl/VGDYQC) позволяет странице работать в полноэкранном режиме, актуален для мобильных устройств Apple.

**Пример**:


```html
<meta name="apple-mobile-web-app-capable" content="yes" />
```

Рекомендованный набор метатегов
-------------------------------

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


```html
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta content="true" name="HandheldFriendly" />
<meta content="width" name="MobileOptimized" />
<meta content="yes" name="apple-mobile-web-app-capable" />
```

Читать больше
-------------

### General Knowledge

* meta viewport. Как он работает?
* Viewport на Wikipedia
* What is viewport in HTML on Stackoverflow
* Get viewport/window size (width and height) with javascript
* A tale of two viewports (Quirksmode)
*