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>

關於在 HTML 中設定 viewport

viewport 設定用於控制顯示網頁的設備之顯示區域（viewport）的資訊。它在調整網頁在行動設備上的顯示方面尤其重要。

什麼是 Viewport？

Viewport 指的是使用者瀏覽網頁時的瀏覽器視窗或設備的顯示區域。在桌面設備上，瀏覽器視窗的大小即為 viewport；然而在智慧型手機和平板等行動設備上，viewport 則是設備螢幕的大小。

指定 Viewport

要控制 viewport，可以在 HTML 中使用 <meta> 標籤設定 viewport。此設定允許您指定網頁在不同設備上應如何顯示。

基本語法 

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

此程式碼將 viewport 寬度設定為符合設備的寬度，並將網頁的初始顯示比例（縮放級別）設為 1.0（100% 顯示）。

viewport 的主要屬性

可以使用 viewport 的 content 屬性指定的主要屬性如下：。

  1. width

    • 使用 width 指定 viewport 的寬度。將其設定為 device-width 時，viewport 會調整為設備的物理寬度（以像素為單位）。
    • 範例：width=device-width

  2. height

    • 使用 height 指定 viewport 的高度，但通常僅設定寬度，較少指定高度。將其設定為 device-height 時，viewport 會與設備的物理高度（以像素為單位）相符。
    • 範例：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 可以為行動使用者提供舒適的瀏覽體驗。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

CSS中響應式設計的概述`@media` 與響應式設計