CSS Visual Viewport API veb tərtibatçılara mobil cihazlarda ekrandakı proqram klaviaturasını və çimdik-miqyas davranışını izləməyə imkan verən xüsusiyyətlər dəsti təqdim edir. window.visualViewport obyektinə daxil olmaqla, siz səhifənin cari istifadəçiyə görünən sahəsini tərtibat görünüşündən (layout viewport) fərqli olaraq dəqiq ölçə bilərsiniz. Bu fərq nəzərdə tutulmuş tərtibatı pozmadan istifadəçi qarşılıqlı əlaqələrinə cavab verən interfeyslər yaratmaq üçün vacibdir.
Visual Viewport API tərtibatçılar üçün nə üçün vacibdir?
Müasir mobil bənövşəyi baxış səhifənin görünən sahəsində tez-tez dəyişiklikləri əhatə edir. İstifadəçilər tez-tez şəkillərə və ya mətnə yaxınlaşır və istifadəçi daxiletmə sahəsinə toxunduqda mobil klaviaturalar ekranın əhəmiyyətli hissəsini örtmək üçün tez-tez yuxarı sürüşür. Ənənəvi viewport meta etiketləri istifadəçi böyütdükdə və ya klaviatura göründükdə belə sabit qalan tərtibat görünüşünü müəyyən edir. Visual Viewport API istənilən vaxt sənədin görünən hissəsinin faktiki ölçülərini və sürüşmələrini bildirməklə bu boşluğu doldurur. Bu alət olmadan, sabit mövqeli elementləriniz təsadüfən daxiletmə sahəsinin arxasında gizlənə bilər və ya klaviatura açıldıqda ekrandan kənara itələnə bilər ki, bu da mobil cihazlarda formaları dolduran istifadəçilər üçün məyusedici təcrübə yaradır.
Tərtibat və vizual görünüşlər arasındakı fərq nədəndir?
| Xüsusiyyət | Tərtibat Görünüşü (Layout Viewport) | Vizual Görünüş (Visual Viewport) |
|---|---|---|
| Əsas Məqsəd | CSS tərtibat bazası | Dinamik görünürlük |
| Böyütmə Təsiri | Dəyişmir | Böyütmə ilə dəyişir |
| Klaviatura Təsiri | Ölçüsünü dəyişmir | Daxiletmədə ölçüsünü dəyişir |
Bu iki fərqli konsepsiyanı başa düşmək sabit mobil interfeyslər qurmaq üçün vacibdir. Tərtibat görünüşü CSS bloklarınızın göstərildiyi sahədir. Adətən viewport meta etiketi tərəfindən təyin edilir və istifadəçinin müəyyən bir paraqrafa nə qədər yaxınlaşmasından asılı olmayaraq sabit qalır. Əksinə, vizual görünüş istifadəçinin əslində gördüyünü təmsil edir. İstifadəçi 200%-ə yaxınlaşdıqda, vizual görünüş effektiv şəkildə kiçilir və tərtibat görünüşünün daha kiçik hissəsini təmsil edir. Bu xüsusiyyətləri izləməklə siz yapışqan başlıqlarınızın və ya üzən əməliyyat düymələrinizin istifadəçi forma girişləri ilə qarşılıqlı əlaqədə olarkən belə əlçatan olmasını təmin edə bilərsiniz.
Klaviatura və böyütmə dəyişikliklərini necə izləyirsiniz?
Bu hadisələri izləmək window.visualViewport obyekti tərəfindən təmin edilən xüsusiyyətlərin dinlənilməsini əhatə edir. Tətbiq statusunuzda yeniləmələri işə salmaq üçün visualViewport obyektində ‘resize’ və ‘scroll’ hadisə dinləyicilərini qoşa bilərsiniz. Məsələn, istifadəçi mətn sahəsinə toxunduqda, proqram klaviaturası ekranı tutduqda ‘resize’ hadisəsi baş verir. Daha sonra məzmununuz üçün nə qədər yer qaldığını görmək üçün vizual görünüşün hündürlük xüsusiyyətini yoxlaya bilərsiniz. Bu, daxiletmə sahəsini mövcud məkanın mərkəzinə avtomatik sürüşdürmək kimi dinamik tənzimləmələrə imkan verir ki, istifadəçi yazarkən o, görünən qalsın.
- Proqram klaviaturasının nə vaxt açıldığını və ya bağlandığını aşkar etmək üçün ‘resize’ hadisəsindən istifadə edin.
- Mövcud şaquli sahəni təyin etmək üçün window.visualViewport.height dəyərini yoxlayın.
- İstifadəçinin tərtibata nisbətən nə qədər irəlilədiyini hesablamaq üçün window.visualViewport.offsetTop-dan istifadə edin.
- Elementlərin qarşısının alınması üçün vizual görünüş dəyərlərinə əsaslanan transformasiyalar tətbiq edin.
Alien Road Visual Viewport API-ni necə tətbiq edir
Alien Road olaraq biz müştəri saytlarının bütün şərtlərdə istifadəyə yararlı qalmasını təmin etmək üçün mobil-ilk inkişafın son mərhələlərində Visual Viewport API-dən istifadə edirik. Tipik əməkdaşlıqda tərtibatçılarımız forma aktiv olduqda vizual görünüş ölçülərini izləyən xüsusi qarmaq tətbiq edirlər. Vizual görünüşün hündürlüyü əhəmiyyətli dərəcədə aşağı düşərsə, biz konteynerin fokusunu dəyişən tərtibat düzəlişini işə salırıq. Biz həmçinin istifadəçi yaxınlaşdıqda sabit başlıqların məzmunu örtməsinin qarşısını almaq üçün çimdik-miqyas hadisələrini izləyirik. Bu sistemli yanaşma hər bir istifadəçinin cihaz parametrlərindən asılı olmayaraq marka ilə ardıcıl qarşılıqlı əlaqə axınını qoruyub saxlamasını təmin edir, elementlərin ekrandan sürüşməsi və ya virtual klaviaturaların arxasında gizlənməsi kimi ümumi problemlərin qarşısını alır.
Qaçınılmalı olan ümumi tələlər hansılardır?
Ən çox yayılmış səhvlərdən biri vizual görünüşün həmişə pəncərə ölçülərinə uyğun olacağını güman etməkdir. Tərtibatçılar tez-tez window.innerHeight-ə güvənirlər, lakin bu xüsusiyyət həmişə virtual klaviaturanın səbəb olduğu kiçilən məkanı əks etdirmir. Digər ümumi problem komponent quraşdırıldıqdan sonra hadisə dinləyicilərini silməməkdir. Tək səhifəlik tətbiqiniz varsa, bu dinləyicilər yığıla və zamanla performansın pisləşməsinə səbəb ola bilər. Saytın yüksək səviyyədə işləməsini qorumaq üçün artıq lazım olmadıqda visualViewport obyektindəki hadisə dinləyicilərini təmizlədiyinizə əmin olun.
- Mobil forma tərtibatları üçün yalnız window.innerHeight-ə etibar etməyin.
- Veb tətbiqinizdə yaddaş sızmasının qarşısını almaq üçün həmişə hadisə dinləyicilərinizi təmizləyin.
- Formalarınızı müxtəlif mobil cihaz modellərində müxtəlif virtual klaviaturalarla sınayın.
- İstifadəçi interfeysini hamar saxlamaq üçün ölçüsünü dəyişdirmə hadisəsi dinləyicisi daxilində ağır hesablamalardan çəkinin.
Bunu növbəti layihənizdə necə həyata keçirə bilərsiniz?
Bu API-dən istifadə etməyə başlamaq üçün brauzerin onu dəstəklədiyini yoxlamaqla başlamalısınız, baxmayaraq ki, əksər müasir mobil brauzerlər onu yerli olaraq ehtiva edir. if (‘visualViewport’ in window) kimi sadə şərti ifadədən istifadə edərək xüsusiyyət yoxlaması həyata keçirə bilərsiniz. Təsdiq edildikdən sonra mobil cihazda səhifə ilə əlaqə saxlayarkən eni və hündürlüyü xüsusiyyətlərini konsola daxil etməyə başlaya bilərsiniz. Sürüşdürərkən və çimdikləyərkən bu rəqəmlərin necə dəyişdiyini müşahidə edin. Oradan, statik tərtibat tərifindən deyil, istifadəçinin ekranının reallığına cavab verən daha uyğunlaşdırılmış UI komponentləri yaratmaq üçün bu dəyərləri CSS dəyişənlərinizə və ya vəziyyətin idarə edilməsi sisteminizə inteqrasiya edə bilərsiniz.
Bu həftə haradan başlamaq lazımdır
Smartfonda saytınızın əlaqə və ya lider yaradılması formalarını nəzərdən keçirməklə bu həftə başlayın. Tərtibatçı konsolunu açın, formalarınıza keçin və konsol çıxışına baxarkən daxiletmə sahələri ilə əlaqə saxlayın. Klaviaturanın hər hansı kritik məlumatı və ya düymələri gizlədib-gizlətmədiyini müəyyənləşdirin. Əgər belədirsə, vizual görünüş hündürlüyü dəyişdikdə doldurmanı və ya sürüşmə mövqeyini tənzimləmək üçün kiçik bir skript yazın. Bu kiçik yeniləmələri indi etməklə siz gələcək əlçatanlıq problemlərinin qarşısını alırsınız və müasir veb trafikanın böyük hissəsini təşkil edən mobil ziyarətçilər üçün interfeysinizi funksional saxlayırsınız.
Tez-tez Verilən Suallar
Visual Viewport API masaüstü brauzerlərdə işləirmi?
Bəli, API masaüstü brauzerlərdə mövcuddur, lakin onun davranışı motildən əhəmiyyətli dərəcədə fərqlənir. Masaüstündə, xüsusi böyütmə xüsusiyyətlərindən və ya qabaqcıl əlçatanlıq alətlərindən istifadə etmirsinizsə, vizual görünüş adətən tərtibat görünüşünə tam uyğun gelir. Buna görə də, kodunuzun müxtəlif mühitlərdə və cihaz növlərində düzgün işləməsini təmin etmək üçün həmişə xüsusiyyət yoxlamasını daxil etməlisiniz.
Bu API bütün mobil brauzerlər tərəfindən dəstəklənirmi?
Visual Viewport API Android üçün Chrome və iOS-da Safari daxil olmaqla, əksər müasir mobil brauzerlər tərəfindən dəstəklənir. Bir çox veb standartlarında olduğu kimi, hədəf auditoriyanızın brauzer payında dəstəyi yoxlamalısınız. Cari istifadəçilərin böyük əksəriyyəti üçün API mürəkkəb iş üsullarına və ya üçüncü tərəf kitabxanalarına ehtiyac duymadan dinamik görünüş dəyişikliklərini idarə etmək üçün etibarlı yol təqdim edir.
Mən bunu sabit mövqeli elementləri düzəltmək üçün istifadə edə bilərəmmi?
Mütləq, bu API üçün əsas istifadə hallarından biridir. Vizual görünüşün ofsetini və ölçülərini izləməklə, proqram klaviaturası tərəfindən gizlədilməsinin qarşısını almaq üçün sabit elementlərin mövqeyini dinamik şəkildə tənzimləyə bilərsiniz. Bu, istifadəçi formaya fəal şəkildə yazarkən belə naviqasiya çubuqlarını və ya fəaliyyətə çağırış düymələrini görünən saxlamağa imkan verir.
O, saytın performansına təsir edirmi?
Düzgün istifadə edildikdə, performansa təsir minimaldır. Əsas məqsəd hadisə dinləyicisi daxilində ağır DOM manipulyasiyalarından və ya mürəkkəb hesablamalardan qaçınmaqdır. Əgər məntiqi yüngül saxlasanız və dəyərlərdən yalnız sadə üslub yeniləmələri və ya sürüşmə tənzimləmələri üçün istifadə etsəniz, müasir cihazlarda heç bir nəzərəçarpacaq yavaşlama ilə qarşılaşmayacaqsınız.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn