Viewport — internet səhifəsinin istifadəçinin cihazında (kompüter, planşet və ya mobil telefon) görünən hissəsidir. Başqa sözlə desək, bu, istifadəçinin ekranında göstərilən veb səhifənin fiziki ölçüsüdür. Viewport ekranın ölçüsünü müəyyən edir və bu ölçü sayəsində veb dizaynerlər və inkişafçılar müxtəlif cihazlarda uyğunluq təmin edə bilirlər.

Viewport anlayışı responsiv dizayn (mobil uyğun dizayn) ilə sıx əlaqəlidir. Mobil cihazların istifadəsi artdıqca, veb saytlardan gözləntilər də dəyişir. İstifadəçilər yalnız masaüstü kompüterlərlə deyil, həm də mobil telefon və planşetlər vasitəsilə internetə daxil olurlar. Bu səbəbdən, veb saytlar müxtəlif ekran ölçülərində düzgün göstərilməlidir.

Viewport Parametrləri və Meta Tag

Bir veb səhifənin düzgün görünməsi üçün, HTML sənədində viewport ilə əlaqəli bəzi parametrlərin təyin edilməsi vacibdir. Məsələn, meta viewport teqi istifadə edilir:

html

Copy

Edit

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

Bu teq veb səhifəsinin başlanğıc ölçüsünü təyin edir və saytın ekran ölçüsünə uyğunlaşmasını təmin edir. Əsas parametrlər:

• width=device-width: Saytın eni cihazın ekranına uyğun olacaq.
• initial-scale=1.0: Saytın başlanğıc miqyası (zoom) 100% olacaq, yəni səhifə avtomatik olaraq böyüdülməyəcək.

Niyə Bu Vacibdir?

Əgər veb saytda meta viewport teqi düzgün istifadə olunmazsa, mobil istifadəçilər səhifəni kiçik ölçüdə görə bilərlər və saytda rahatlıqla hərəkət etmək çətinləşər. Bu vəziyyətdə, səhifə yalnız böyük ekranlarda düzgün göstərilə bilər, amma kiçik ekranlı cihazlarda istifadəçi təcrübəsi pisləşər.

Responsive Dizayn və Viewport

Responsive dizayn istifadəçilərin ekran ölçüsünə uyğun olaraq veb saytın tərtibatını dinamik şəkildə dəyişdirir. Viewport parametrinin düzgün təyin edilməsi ilə sayt həm masaüstü kompüterlərdə, həm də mobil telefonlarda rahat şəkildə istifadə oluna bilər. Bu, xüsusilə kiçik ekranlı cihazlar üçün önəmlidir, çünki onlar daha geniş ekranlara malik cihazlarla müqayisədə daha kiçik ekran ölçülərinə malikdirlər.

Nümunə:

• Masaüstü kompüterdə bir veb səhifə tam ölçüdə və bir neçə sütunla göstərilə bilər.
• Mobil telefonda isə eyni səhifə bir sütunda və tək sətirdə göstərilə bilər ki, bu da istifadəçiyə rahatlıqla hərəkət etməyə imkan verir.

Bütün bunlar viewport parametrinin necə işlədiyini və niyə müasir veb dizaynında bu qədər əhəmiyyətli olduğunu göstərir.