Articles
Введение в CSS
Окно просмотра и адаптивный дизайн

Окно просмотра и адаптивный дизайн

В этой статье объясняются окно просмотра и адаптивный дизайн.

Вы узнаете, как установить окно просмотра с помощью тега <meta> и почему это важно.

YouTube Video

HTML для предварительного просмотра

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

О настройке viewport в HTML

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

Что такое Viewport?

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

Указание параметров Viewport

Для управления областью просмотра настройте параметры viewport с помощью тега <meta> в HTML. Эта настройка позволяет указать, как страница будет отображаться на разных устройствах.

Базовый синтаксис 

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

Этот код устанавливает ширину области просмотра в соответствии с шириной устройства и начальный масштаб отображения страницы на уровне 1.0 (100% отображения).

Основные свойства viewport

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

  1. width

    • Укажите ширину области просмотра с помощью width. При установке значения device-width область просмотра настраивается в соответствии с физической шириной устройства в пикселях.
    • Пример: width=device-width

  2. height

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

  3. initial-scale

    • Укажите начальный уровень увеличения страницы с помощью initial-scale. 1.0 означает 100% уровень масштабирования устройства.
    • Пример: initial-scale=1.0

  4. minimum-scale

    • Укажите минимальный масштаб для уменьшения с помощью minimum-scale. Установив значение 0.5, вы можете уменьшить масштаб до 50%.
    • Пример: minimum-scale=0.5

  5. maximum-scale

    • Укажите максимальный масштаб для увеличения с помощью maximum-scale. Установив значение 2.0, вы можете увеличить масштаб до 200%.
    • Пример: maximum-scale=2.0

  6. user-scalable

    • Укажите, может ли пользователь масштабировать страницу с помощью user-scalable. Укажите значение yes или no.
    • Пример: Установка user-scalable=no отключает масштабирование пользователем.

Часто используемые примеры

  1. Стандартные настройки для адаптивного дизайна
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Эта настройка автоматически подстраивает страницу под ширину экрана мобильного устройства и отображает её с уровнем масштабирования 100%. Это основная настройка для адаптивного дизайна.

  1. Отключить масштабирование
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

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

  1. Фиксированные уровни масштабирования и ширина области просмотра
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Эта настройка фиксирует ширину области просмотра на уровне 1024 пикселей и устанавливает уровень масштабирования 100% при первоначальном отображении. Она используется, если вы хотите сохранить фиксированную ширину страницы независимо от ширины устройства.

Роль viewport

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

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

Резюме

  • viewport используется для управления областью отображения устройства, показывающего веб-страницу.
  • Он в основном используется для адаптации отображения на мобильных устройствах и играет важную роль в адаптивном дизайне.
  • Настройки, такие как width=device-width и initial-scale=1.0, часто используются в стандартном адаптивном веб-дизайне.

Правильная настройка viewport может обеспечить мобильным пользователям комфортное восприятие контента.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Обзор адаптивного дизайна в CSS