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 ในขณะที่บนอุปกรณ์พกพา เช่น สมาร์ทโฟนและแท็บเล็ต ขนาดหน้าจอของอุปกรณ์จะกลายเป็น viewport

การกำหนด Viewport

เพื่อควบคุม viewport คุณสามารถตั้งค่า viewport โดยใช้แท็ก <meta> ใน HTML การตั้งค่านี้ช่วยให้คุณกำหนดได้ว่าหน้าจะถูกแสดงอย่างไรบนอุปกรณ์ที่แตกต่างกัน

ไวยกรณ์พื้นฐาน 

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

โค้ดนี้ตั้งค่าความกว้างของ viewport ให้ตรงกับความกว้างของอุปกรณ์และกำหนดระดับการแสดงผลเริ่มต้น (ระดับการซูม) ของหน้าที่ 1.0 (แสดงผล 100%)

คุณสมบัติหลักของ viewport

คุณสมบัติที่สามารถกำหนดได้โดยหลักกับแอตทริบิวต์ content ของ viewport มีดังนี้:

  1. width

    • กำหนดความกว้างของ viewport โดยใช้ width โดยการตั้งค่าเป็น device-width viewport จะถูกปรับให้ตรงกับความกว้างทางกายภาพของอุปกรณ์ในหน่วยพิกเซล
    • ตัวอย่าง: width=device-width

  2. height

    • กำหนดความสูงของ viewport โดยใช้ height แต่โดยทั่วไปจะตั้งค่าเฉพาะความกว้าง และมักจะไม่ระบุความสูง โดยการตั้งค่าเป็น 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. ระดับการซูมคงที่และความกว้างของ Viewport
1<meta name="viewport" content="width=1024, initial-scale=1.0">

การตั้งค่านี้จะกำหนดความกว้างของ Viewport ไว้ที่ 1024 พิกเซล และตั้งระดับการซูมเป็น 100% ที่การแสดงผลเริ่มต้น ใช้เมื่อคุณต้องการให้ความกว้างของหน้าคงที่ไม่ว่าจะเป็นความกว้างของอุปกรณ์

บทบาทของ viewport

การตั้งค่า viewport เป็นสิ่งสำคัญสำหรับการเพิ่มประสิทธิภาพการแสดงผล โดยเฉพาะบนอุปกรณ์มือถือ โดยการตั้งค่า viewport อย่างถูกต้อง คุณสามารถป้องกันปัญหาที่อาจเกิดขึ้น เช่น ต่อไปนี้:

  • ป้องกันไม่ให้หน้าจอเกินความกว้างของอุปกรณ์ ซึ่งจะทำให้ต้องเลื่อน
  • ป้องกันไม่ให้ข้อความและรูปภาพมีขนาดเล็กเกินไปจนอ่านได้ยาก
  • ป้องกันไม่ให้ทั้งหน้าเว็บไซต์ถูกย่อขนาดจนยากต่อการโต้ตอบ

สรุป

  • viewport ใช้เพื่อควบคุมพื้นที่แสดงผลของอุปกรณ์ที่แสดงหน้าเว็บไซต์
  • ส่วนใหญ่ใช้เพื่อปรับให้เข้ากับการแสดงผลบนอุปกรณ์มือถือและมีบทบาทสำคัญในงานออกแบบที่ตอบสนอง
  • การตั้งค่าเช่น width=device-width และ initial-scale=1.0 มักใช้ในงานออกแบบเว็บไซต์ที่ตอบสนองมาตรฐาน

การตั้งค่า viewport อย่างเหมาะสมสามารถมอบประสบการณ์การรับชมที่สะดวกสบายให้กับผู้ใช้อุปกรณ์มือถือ

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

ภาพรวมของการออกแบบที่ตอบสนองใน CSS