generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
66 lines (43 loc) · 5.32 KB
/
description.ru.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
---
name: Viewport
theory: |
Для корректного отображения разметки HTML браузеры создают специальную копию разметки и вставляют её в «виртуальное окно», которое называется viewport. Зачастую данное окно шире, чем экран текущего устройства. Это сделано для того, чтобы все элементы поместились так, как задумывалось. Данный эффект можно увидеть, если зайти на неадаптированную HTML-страницу с мобильного устройства. В таком случае появляется горизонтальная полоса прокрутки.
Впервые данный метатег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались не полностью, а только первые 320 пикселей по ширине.
Сейчас такая проблема решается указанием ширины сайта для устройств. Наиболее часто используют значение `device-width` у параметра `width`, которое устанавливает ширину страницы, равную ширине экрана устройства.
```html
<head>
<meta name="viewport" content="width=device-width">
</head>
```
Этим значением браузеру сообщается, что ширина страницы равна ширине устройства, с которого эта страница просматривается.
---
Сейчас вам может показаться это сложным, но, с изучением CSS, вы полностью поймёте смысл указания `viewport`. Сейчас важно знать про такой метатег и его основные варианты применения
---
Стоит обратить внимание, что параметры задаются внутри атрибута `content`, свойства в котором разделяются запятой.
### Основные параметры метатега viewport
* `width` — ширина сайта. Указывается в пикселях. Возможно использование значения `device-width` для установки ширины страницы равной ширине устройства.
* `height` — высота сайта. Указывается в пикселях. Возможно использование значения `device-height` для установки высоты страницы равной высоте устройства.
* `initial-scale` — начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10.0. Значение единица масштабирует страницу по умолчанию.
* `user-scalable` — указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значение `yes` и `no`
Укажем _viewport_ со следующими характеристиками:
* Ширина: 980px
* Масштаб: 1
* Запрет управления масштабированием. То есть запретить приближать или отдалять контент с помощью жестов или «горячих клавиш»
Для этого создаём метатег и, вначале указываем ширину. Это делается с помощью значения `width`:
```html
<meta name="viewport" content="width=980">
```
Задать изначальный масштаб поможет значение `initial-scale` со значением `1.0`. Оно означает, что страница выведется без какого-либо искажения, с теми размерами шрифтов и других элементов, которые были установлены разработчиками.
```html
<meta name="viewport" content="width=980, initial-scale=1.0">
```
Последнее — запрет на масштабирование. Для этого добавим `user-scalable` со значением `no`
```html
<meta name="viewport" content="width=980, initial-scale=1.0, user-scalable=no">
```
## Базовое использование метатега viewport
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
instructions: |
Добавьте метатег viewport с шириной экрана 1024px, без возможности масштабирования со стороны пользователя