Articles
Panimula sa CSS
Disenyo ng Viewport at Responsive

Disenyo ng Viewport at Responsive

Ipinapaliwanag ng artikulong ito ang viewport at disenyo na responsive.

Matututuhan mo kung paano itakda ang viewport gamit ang <meta> tag at kung bakit ito mahalaga.

YouTube Video

HTML para sa Preview

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>

Tungkol sa Pagtakda ng viewport sa HTML

Ang setting na viewport ay ginagamit upang kontrolin ang impormasyon tungkol sa display area (viewport) ng device na nagpapakita ng webpage. May mahalagang papel ito lalo na sa pag-aayos ng display ng mga web page sa mga mobile device.

Ano ang Viewport?

Ang viewport ay tumutukoy sa display area ng isang browser window o device kung saan tinitingnan ng user ang isang web page. Sa desktop, ang sukat ng browser window ang nagiging viewport, samantalang sa mga mobile device tulad ng smartphones at tablets, ang sukat ng screen ng device ang nagiging viewport.

Pagpapahayag ng Viewport

Upang makontrol ang viewport, ise-set up mo ang mga viewport setting gamit ang <meta> na tag sa HTML. Ang setting na ito ay nagbibigay-daan upang tukuyin kung paano ipapakita ang pahina sa iba't ibang device.

Pangunahing Syntax 

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

Itinatakda ng code na ito ang lapad ng viewport upang tumugma sa lapad ng device at ang paunang display scale (zoom level) ng pahina sa 1.0 (100% na display).

Pangunahing Mga Katangian ng viewport

Ang mga katangian na pangunahing maaaring tukuyin gamit ang content na attribute ng viewport ay ang mga sumusunod:.

  1. width

    • Itakda ang lapad ng viewport para sa width. Sa pamamagitan ng pagtatakda nito sa device-width, inaangkop ang viewport sa pisikal na lapad ng device sa pixels.
    • Halimbawa: width=device-width

  2. height

    • Itakda ang taas ng viewport para sa height, bagamat kadalasan ay ang lapad lamang ang itinakda at bihira ang pagtakda ng taas. Sa pamamagitan ng pagtatakda nito sa device-height, tumutugma ang viewport sa pisikal na taas ng device sa pixels.
    • Halimbawa: height=device-height

  3. initial-scale

    • Itakda ang paunang antas ng zoom ng pahina para sa initial-scale. 1.0 ay nangangahulugang 100% na antas ng zoom ng device.
    • Halimbawa: initial-scale=1.0

  4. minimum-scale

    • Tukuyin ang pinakamababang antas para sa pag-zoom out gamit ang minimum-scale. Kapag itinakda sa 0.5, maaari kang mag-zoom out ng hanggang 50%.
    • Halimbawa: minimum-scale=0.5

  5. maximum-scale

    • Tukuyin ang pinakamataas na antas para sa pag-zoom in gamit ang maximum-scale. Kapag itinakda sa 2.0, maaari kang mag-zoom in ng hanggang 200%.
    • Halimbawa: maximum-scale=2.0

  6. user-scalable

    • Tukuyin kung maaaring i-zoom ng user ang pahina gamit ang user-scalable. Itakda gamit ang yes o no.
    • Halimbawa: Ang pagtatakda ng user-scalable=no ay hindi pinapayagan ang pag-zoom ng user.

Karaniwang Ginagamit na Mga Halimbawa

  1. Katutubong Responsive na Mga Setting
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Inaayos ng setting na ito ang pahina upang tumugma sa lapad ng screen ng mga mobile device at sinisiguro na ang pahina ay ipinapakita sa 100% na antas ng zoom. Ito ay isang pangunahing setting para sa responsive na disenyo.

  1. Huwag Payagan ang Pag-zoom
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Pinipigilan ng setting na ito ang user na mag-zoom. Ginagamit ito kapag hindi kailangan ang pag-zoom para sa isang partikular na disenyo o kapag ang pag-zoom ay maaaring makasira sa disenyo.

  1. Nakatakdang Antas ng Zoom at Lapad ng Viewport
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Ipinipirmi ng setting na ito ang lapad ng viewport sa 1024 pixels at itinatakda ang antas ng zoom sa 100% sa unang pagpapakita. Ginagamit ito kapag nais mong panatilihing pare-pareho ang lapad ng pahina kahit na ano pa man ang lapad ng device.

Papel ng viewport

Ang pagtatakda ng viewport ay mahalaga para sa pag-optimize ng display, lalo na sa mga mobile device. Sa tamang pagsasaayos ng viewport, maaari mong maiwasan ang mga isyu tulad ng mga sumusunod:.

  • Pinipigilan nito ang pahina na lumampas sa lapad ng device, na magdudulot ng pag-scroll.
  • Pinipigilan ang teksto at mga larawan na maging masyadong maliit upang madaling mabasa.
  • Pinipigilan ang buong pahina na ma-zoom out, na nagiging mahirap makipag-ugnayan.

Buod

  • Ang viewport ay ginagamit upang kontrolin ang display area ng device na nagpapakita ng webpage.
  • Pangunahing ginagamit ito upang iakma ang pagpapakita sa mga mobile device at may mahalagang papel sa responsive design.
  • Ang mga setting tulad ng width=device-width at initial-scale=1.0 ay karaniwang ginagamit sa karaniwang responsive web design.

Ang wastong pag-set ng viewport ay maaaring magbigay ng komportableng karanasan sa panonood para sa mga mobile user.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Pangkalahatang-ideya ng Responsive Design sa CSS