Responsive Web Design - Viewport

Ano ang viewport?

Ang viewport (viewport) ay ang makikita na lugar ng gumamit sa pahina.

Ang viewport ay nag-iiba sa bawat device, mas maliit ito sa mobile phone kaysa sa screen ng computer.

Bago pa ang tablet at mobile phone, ang pahina ay niluklukan lamang para sa screen ng computer, at ang static na disenyo at may sukat na pahina ay napakakaraniwan.

Pagkatapos, nang magsimula naming gumamit ng tablet at mobile phone sa pag-access ng internet, ang may sukat na pahina ay napakalaki, hindi nakakatugon sa viewport. Upang maging malutas ito, ang mga browser sa mga device ay nangangahulugan na paliitin ang buong pahina upang masunod ang laki ng screen.

Hindi ito perpekto! Mahirap lang ang mabilis na pagwawasto.

nagtakda ng viewport

Nagpalabas ng isang paraan ang HTML5, na pinahahalagahan ng Web designer sa pamamagitan ng <meta> tag upang kontrolin ang viewport.

Dapat mong isama sa lahat ng pahina ang sumusunod na <meta> Elementong viewport:

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

Ito ay nagbibigay ng mga utos sa browser kung paano kontrolin ang laki ng pahina at ang proporsyon ng pagzoom.

width=device-width Ilang na ang itinakda ang lapad ng pahina upang sumunod sa lapad ng screen ng device (depende sa device).

Kapag unang inilagay ang pahina ng browser,initial-scale=1.0 Ilang na ang inilalagay na naunang pagkalat ng pagzoom.

Sa ibaba ay mayroong halimbawa ng websayt na walang viewport meta tag, at websayt na may viewport meta tag.

Tip:Kung gumagamit ka ng mobile phone o tablet sa pagbabasa ng pahina na ito, maaari mong i-click ang dalawang link sa ibaba upang makita ang pagkakaiba.



Wala ng viewport meta tag.


Mayroong viewport meta tag.

Ayusin ang nilalaman sa laki ng viewport.

Ang karanasan ng gumamit ay gumagalaw pababa sa websayt sa desktop at mobile device, hindi gumagalaw sa pader!

Kaya't kung pinilit ang gumamit na gumagalaw sa horizontal o gumyabang upang makita ang buong pahina, magiging mahirap na karanasan ang gumamit.

Kailangan pa ring sundin ang ilang karagdagang patakaran:

1. Do not use large fixed width elements - For example, if the width of the image is greater than the width of the viewport, it may cause the viewport to scroll horizontally. Be sure to adjust this content to fit the width of the viewport.

2. Do not let content depend on a specific viewport width to present good results - Since the screen size and width measured in CSS pixels vary greatly between devices, the content should not depend on a specific viewport width to present good results.

3. Use CSS media queries to apply different styles for small and large screens - Setting a larger CSS absolute width for page elements will cause the element to be too wide for the viewport on smaller devices. Instead, consider using relative width values, such as width: 100%. Also, be cautious when using large absolute positioning values, which may cause the element to slide out of the viewport on small devices.