Articles
Giới thiệu về CSS
Chế độ xem và Thiết kế đáp ứng

Chế độ xem và Thiết kế đáp ứng

Bài viết này giải thích về chế độ xem và thiết kế đáp ứng.

Bạn sẽ học cách thiết lập chế độ xem bằng thẻ <meta> và lý do tại sao nó quan trọng.

YouTube Video

HTML để Xem trước

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>

Về việc thiết lập viewport trong HTML

Thiết lập viewport được sử dụng để kiểm soát thông tin về khu vực hiển thị (viewport) của thiết bị hiển thị trang web. Nó đóng một vai trò quan trọng đặc biệt trong việc điều chỉnh hiển thị của các trang web trên thiết bị di động.

Viewport là gì?

Viewport đề cập đến khu vực hiển thị của cửa sổ trình duyệt hoặc thiết bị nơi người dùng đang xem một trang web. Trên máy tính để bàn, kích thước cửa sổ trình duyệt trở thành viewport, trong khi trên các thiết bị di động như điện thoại thông minh và máy tính bảng, kích thước màn hình thiết bị trở thành viewport.

Xác định Viewport

Để kiểm soát viewport, bạn định cấu hình các cài đặt viewport bằng thẻ <meta> trong HTML. Cài đặt này cho phép bạn chỉ định cách trang sẽ hiển thị trên các thiết bị khác nhau.

Cú pháp Cơ bản 

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

Đoạn mã này thiết lập chiều rộng viewport phù hợp với chiều rộng của thiết bị và tỉ lệ hiển thị ban đầu (mức thu phóng) của trang là 1.0 (hiển thị 100%).

Các thuộc tính chính của viewport

Các thuộc tính có thể được chỉ định chủ yếu bằng thuộc tính content của viewport như sau:.

  1. width

    • Chỉ định chiều rộng của viewport bằng width. Bằng cách đặt giá trị device-width, viewport sẽ được điều chỉnh theo chiều rộng vật lý của thiết bị tính bằng pixel.
    • Ví dụ: width=device-width

  2. height

    • Chỉ định chiều cao của viewport bằng height, mặc dù thông thường chỉ thiết lập chiều rộng và chiều cao ít khi được chỉ định. Bằng cách đặt giá trị device-height, viewport sẽ phù hợp với chiều cao vật lý của thiết bị tính bằng pixel.
    • Ví dụ: height=device-height

  3. initial-scale

    • Chỉ định mức thu phóng ban đầu của trang bằng initial-scale. 1.0 có nghĩa là mức phóng to 100% của thiết bị.
    • Ví dụ: initial-scale=1.0

  4. minimum-scale

    • Chỉ định mức thu nhỏ tối thiểu cho minimum-scale. Bằng cách đặt nó thành 0.5, bạn có thể thu nhỏ tối đa tới 50%.
    • Ví dụ: minimum-scale=0.5

  5. maximum-scale

    • Chỉ định mức phóng to tối đa cho maximum-scale. Bằng cách đặt nó thành 2.0, bạn có thể phóng to tối đa tới 200%.
    • Ví dụ: maximum-scale=2.0

  6. user-scalable

    • Chỉ định liệu người dùng có thể phóng to trang với user-scalable hay không. Chỉ định bằng yes hoặc no.
    • Ví dụ: Đặt user-scalable=no tắt chức năng thu phóng của người dùng.

Các ví dụ thường được sử dụng

  1. Cài đặt đáp ứng chuẩn
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cài đặt này tự động điều chỉnh trang để phù hợp với chiều rộng màn hình của thiết bị di động và đảm bảo rằng trang được hiển thị ở mức phóng to 100%. Đây là một cài đặt cơ bản cho thiết kế đáp ứng.

  1. Tắt chức năng phóng to
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Cài đặt này tắt chức năng thu phóng của người dùng. Được sử dụng khi việc phóng to không cần thiết đối với một thiết kế cụ thể hoặc khi thao tác phóng to có thể gây hỏng bố cục.

  1. Cố định mức thu phóng và chiều rộng khung nhìn
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Cài đặt này cố định chiều rộng khung nhìn ở mức 1024 pixel và đặt mức phóng to thành 100% khi hiển thị ban đầu. Được sử dụng khi bạn muốn giữ chiều rộng trang không thay đổi bất kể chiều rộng của thiết bị.

Vai trò của viewport

Cài đặt viewport rất quan trọng để tối ưu hóa hiển thị, đặc biệt trên các thiết bị di động. Bằng cách cấu hình viewport đúng cách, bạn có thể tránh các vấn đề như sau:.

  • Ngăn trang vượt quá chiều rộng của thiết bị, điều này sẽ yêu cầu cuộn.
  • Ngăn chặn văn bản và hình ảnh trở nên quá nhỏ, khó đọc.
  • Ngăn chặn toàn bộ trang bị thu nhỏ quá mức, làm cho việc tương tác trở nên khó khăn.

Tóm tắt

  • viewport được sử dụng để kiểm soát khu vực hiển thị của thiết bị đang trình bày trang web.
  • Chủ yếu được sử dụng để phù hợp với hiển thị trên thiết bị di động và đóng vai trò quan trọng trong thiết kế đáp ứng.
  • Các thiết lập như width=device-width và initial-scale=1.0 thường xuyên được sử dụng trong thiết kế web đáp ứng tiêu chuẩn.

Thiết lập viewport đúng cách có thể mang lại trải nghiệm xem thoải mái cho người dùng di động.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Tổng quan về thiết kế đáp ứng trong CSS