CSS peržiūros srities taisyklė: mobiliosios peržiūros srities valdymo įsisavinimas globalioms interneto patirtims

Šiuolaikiniame susietame pasaulyje, kuriame milijardai vartotojų internetą pasiekia pirmiausia per mobiliuosius įrenginius, užtikrinti nuoseklią ir optimalią vartotojo patirtį įvairiausių dydžių ir raiškos ekranuose yra ne tik privalumas, bet ir absoliuti būtinybė. Mobilusis internetas yra įvairialypis peizažas, apimantis nuo kompaktiškų išmaniųjų telefonų iki didesnių planšetinių kompiuterių, kurių kiekvienas kelia savitus iššūkius dizaineriams ir programuotojams. Tikrai adaptyvios ir patogios vartotojui patirties pagrindas yra kritinis CSS peržiūros srities taisyklės supratimas ir įgyvendinimas. Ši pamatinė koncepcija nustato, kaip interneto turinys yra atvaizduojamas ir masteliuojamas mobiliuosiuose įrenginiuose, ir yra adaptyviojo interneto dizaino kertinis akmuo.

Be tinkamo peržiūros srities valdymo, svetainės gali atrodyti mažos, neįskaitomos ar sunkiai naršomos mobiliųjų įrenginių ekranuose, o tai lemia aukštus atmetimo rodiklius ir prastą vartotojo patirtį. Įsivaizduokite pasaulinę e. prekybos platformą, kurioje klientai Tokijuje, Berlyne ar San Paule vargsta bandydami peržiūrėti produktų nuotraukas ar užbaigti pirkimą, nes svetainė nėra optimizuota jų nešiojamam įrenginiui. Tokie scenarijai pabrėžia didžiulę mobiliosios peržiūros srities valdymo įsisavinimo svarbą. Šiame išsamiame vadove giliai pasinersime į CSS peržiūros srities taisyklės mechaniką, nagrinėsime jos savybes, praktinius pritaikymus, dažniausiai pasitaikančius iššūkius ir geriausias praktikas, kad suteiktume jums galių kurti tikrai patikimas ir pasauliniu mastu prieinamas interneto programas.

Peržiūros srities supratimas: mobiliosios žiniatinklio drobė

Prieš pradedant efektyviai valdyti peržiūros sritį, būtina suvokti, ką ji iš tikrųjų reiškia. Staliniuose kompiuteriuose peržiūros sritis paprastai yra aiški: tai pats naršyklės langas. Tačiau mobilioji aplinka įneša sudėtingumo sluoksnių, daugiausia dėl didelių fizinių ekrano matmenų ir raiškos skirtumų, palyginti su tradiciniais monitoriais.

Kas yra peržiūros sritis?

Konceptualiai peržiūros sritis yra matoma tinklalapio sritis įrenginio ekrane. Tai „langas“, per kurį vartotojas mato jūsų turinį. Skirtingai nuo stalinių naršyklių, kur šį langą paprastai valdo vartotojas keisdamas naršyklės dydį, mobiliuosiuose įrenginiuose naršyklė dažnai pagal nutylėjimą bando pateikti „panašią į stalinio kompiuterio“ patirtį, o tai gali būti neproduktyvu vartotojo patirčiai. Norėdami tai suprasti, turime atskirti du esminius peržiūros srities tipus: išdėstymo peržiūros sritį ir vaizdinę peržiūros sritį.

Išdėstymo peržiūros sritis ir vaizdinė peržiūros sritis

Siekdamos pritaikyti svetaines, sukurtas didesniems stalinių kompiuterių ekranams, ankstyvosios mobiliosios naršyklės įvedė „išdėstymo peržiūros srities“ (angl. layout viewport, dar vadinamos „dokumento peržiūros sritimi“ arba „virtualia peržiūros sritimi“) koncepciją.

• Išdėstymo peržiūros sritis: Tai yra už ekrano ribų esanti, didesnė drobė, kurioje naršyklė atvaizduoja visą tinklalapį. Pagal nutylėjimą daugelis mobiliųjų naršyklių nustato šios išdėstymo peržiūros srities plotį į 980px arba 1024px, nepriklausomai nuo tikrojo įrenginio fizinio ekrano pločio. Tai leidžia naršyklei atvaizduoti puslapį taip, lyg jis būtų staliniame kompiuteryje, o tada sumažinti jį, kad tilptų į mažesnį fizinį ekraną. Nors tai apsaugo turinį nuo lūžimo, dažnai gaunamas neįskaitomai mažas tekstas ir smulkūs interaktyvūs elementai, verčiantys vartotojus didinti vaizdą sugnėbiant pirštus ir slinkti horizontaliai.
• Vaizdinė peržiūros sritis: Tai yra faktinė matoma išdėstymo peržiūros srities dalis. Ji atspindi stačiakampę sritį, kurią vartotojas šiuo metu mato savo įrenginio ekrane. Kai vartotojas priartina mobilųjį puslapį, išdėstymo peržiūros sritis išlieka tokio paties dydžio, tačiau vaizdinė peržiūros sritis susitraukia, sutelkdama dėmesį į mažesnę išdėstymo peržiūros srities dalį. Kai vartotojas atitolina vaizdą, vaizdinė peržiūros sritis išsiplečia, kol sutampa su išdėstymo peržiūros sritimi (arba pasiekia maksimalų priartinimo lygį). Svarbiausia čia yra tai, kad CSS matmenys, tokie kaip width: 100% ir medijos užklausos, veikia remiantis išdėstymo peržiūros sritimi, o ne vaizdine peržiūros sritimi, nebent specialiai sukonfigūruota kitaip naudojant meta peržiūros srities žymę.

Būtent šį neatitikimą tarp dviejų peržiūros sričių siekia išspręsti meta peržiūros srities žymė, leidžianti programuotojams suderinti išdėstymo peržiūros sritį su tikruoju įrenginio pločiu ir taip įgalinti tikrą adaptyvųjį dizainą.

Meta peržiūros srities žymės vaidmuo

HTML žymė, įdėta į dokumento sekciją, yra pagrindinis mechanizmas, skirtas valdyti peržiūros srities elgseną mobiliuosiuose įrenginiuose. Ji nurodo naršyklei, kaip nustatyti išdėstymo peržiūros sritį, vadovaudama, kaip masteliuoti ir atvaizduoti puslapį. Ši viena kodo eilutė yra bene svarbiausias komponentas, užtikrinantis adaptyvią mobiliąją patirtį. Dažniausiai naudojama ir rekomenduojama meta peržiūros srities žymė yra:

Išnagrinėkime esminius atributus šioje kritinėje meta žymėje.

Pagrindinės meta peržiūros srities žymės savybės

Meta peržiūros srities žymės content atributas priima kableliais atskirtą savybių sąrašą, kuris nustato, kaip naršyklė turėtų interpretuoti ir rodyti jūsų tinklalapį mobiliųjų įrenginių ekranuose. Suprasti kiekvieną savybę yra gyvybiškai svarbu norint tiksliai suderinti mobilųjį pateikimą.

width

Savybė width valdo išdėstymo peržiūros srities dydį. Tai bene svarbiausia savybė adaptyviajam dizainui.

• width=device-width: Tai yra dažniausiai naudojama ir labiausiai rekomenduojama reikšmė. Ji nurodo naršyklei nustatyti išdėstymo peržiūros srities plotį lygų įrenginio pločiui įrenginio nepriklausomais pikseliais (DIP). Tai reiškia, kad įrenginys, kurio fizinis ekrano plotis yra 360px (DIP, net jei jo tikroji pikselių raiška yra daug didesnė), turės 360px pločio išdėstymo peržiūros sritį. Tai tiesiogiai suderina jūsų CSS pikselių reikšmes su efektyviuoju įrenginio pločiu, leisdama CSS medijos užklausoms, pagrįstoms min-width arba max-width, veikti taip, kaip numatyta, atsižvelgiant į įrenginio dydį. Pavyzdžiui, jei turite @media (max-width: 768px) { ... }, ši užklausa suveiks įrenginiuose, kurių device-width yra 768px ar mažesnis, užtikrinant, kad jūsų planšetės ar mobiliojo telefono stiliai būtų pritaikyti teisingai.
• width=[reikšmė]: Taip pat galite nustatyti konkrečią pikselių reikšmę, pvz., width=980. Tai sukuria fiksuoto pločio išdėstymo peržiūros sritį, panašią į senesnių mobiliųjų naršyklių numatytąjį elgesį. Nors tai gali būti naudinga senesnėms svetainėms, kurios nėra sukurtos adaptyviai, tai panaikina adaptyviojo dizaino privalumus ir paprastai nerekomenduojama šiuolaikiniam interneto kūrimui, nes greičiausiai lems horizontalų slinkimą ar ekstremalų mastelio keitimą mažesniuose ekranuose.

initial-scale

Savybė initial-scale valdo priartinimo lygį, kai puslapis pirmą kartą įkeliamas. Ji nurodo santykį tarp išdėstymo peržiūros srities pločio ir vaizdinės peržiūros srities pločio.

• initial-scale=1.0: Tai yra standartinė ir rekomenduojama reikšmė. Tai reiškia, kad vaizdinės peržiūros srities santykis su išdėstymo peržiūros sritimi puslapio įkėlimo metu bus 1:1. Jei taip pat nustatyta width=device-width, tai užtikrina, kad 1 CSS pikselis atitinka 1 įrenginio nepriklausomą pikselį, išvengiant bet kokio pradinio priartinimo ar atitolinimo, kuris galėtų sutrikdyti jūsų adaptyvųjį išdėstymą. Pavyzdžiui, jei mobilusis įrenginys turi 360px device-width, nustačius initial-scale=1.0, naršyklė atvaizduos puslapį taip, kad 360 CSS pikselių tiksliai tilptų į vaizdinę peržiūros sritį be jokio pradinio mastelio keitimo.
• initial-scale=[reikšmė]: Reikšmės, didesnės nei 1.0 (pvz., initial-scale=2.0), iš pradžių priartintų vaizdą, todėl turinys atrodytų didesnis. Reikšmės, mažesnės nei 1.0 (pvz., initial-scale=0.5), iš pradžių atitolintų vaizdą, todėl turinys atrodytų mažesnis. Jos retai naudojamos standartiniams adaptyviems dizainams, nes nuo pat pradžių gali sukurti nenuoseklią vartotojo patirtį.

minimum-scale ir maximum-scale

Šios savybės apibrėžia minimalų ir maksimalų priartinimo lygius, kuriuos vartotojai gali taikyti puslapiui po jo įkėlimo.

• minimum-scale=[reikšmė]: Nustato žemiausią leistiną priartinimo lygį. Pavyzdžiui, minimum-scale=0.5 leistų vartotojams atitolinti vaizdą iki pusės pradinio dydžio.
• maximum-scale=[reikšmė]: Nustato aukščiausią leistiną priartinimo lygį. Pavyzdžiui, maximum-scale=2.0 leistų vartotojams priartinti vaizdą iki dvigubo pradinio dydžio.

Nors tai suteikia kontrolę, nustatant ribojančius minimalius ar maksimalius mastelius (ypač maximum-scale=1.0), tai gali pakenkti prieinamumui. Vartotojai su regėjimo sutrikimais dažnai pasikliauja priartinimu sugnėbiant pirštus, kad galėtų skaityti turinį. Užkertant kelią šiai funkcijai, jūsų svetainė gali tapti nenaudojama didelei pasaulinės auditorijos daliai. Paprastai rekomenduojama vengti vartotojo mastelio keitimo ribojimo, nebent yra labai specifinė, įtikinama vartotojo patirties ar saugumo priežastis, ir net tada – tik atidžiai atsižvelgiant į prieinamumo gaires.

user-scalable

Savybė user-scalable tiesiogiai valdo, ar vartotojai gali priartinti ar atitolinti puslapį.

• user-scalable=yes (arba user-scalable=1): Leidžia vartotojams priartinti. Tai yra numatytasis naršyklės elgesys, jei savybė praleidžiama, ir paprastai rekomenduojama dėl prieinamumo.
• user-scalable=no (arba user-scalable=0): Neleidžia vartotojams priartinti. Šis nustatymas, dažnai derinamas su maximum-scale=1.0, gali smarkiai pakenkti prieinamumui vartotojams, kuriems reikalingi didesni teksto dydžiai arba padidintas turinys. Nors tai gali užkirsti kelią išdėstymo problemoms, kurias sukelia ekstremalus priartinimas, prieinamumo pasekmės yra didelės ir paprastai nusveria tariamus privalumus. Griežtai patariama nenaudoti šio nustatymo daugumoje gamybinių aplinkų, laikantis pasaulinių prieinamumo standartų, tokių kaip WCAG (Web Content Accessibility Guidelines), kurie pasisako už vartotojo kontrolę turinio mastelio keitimo atžvilgiu.

height

Panašiai kaip width, savybė height leidžia nustatyti išdėstymo peržiūros srities aukštį. Tačiau ši savybė retai naudojama su device-height, nes naršyklės vaizdinės srities aukštis gali labai skirtis dėl naršyklės valdymo elementų, dinaminių įrankių juostų ir virtualios klaviatūros atsiradimo mobiliuosiuose įrenginiuose. Pasikliaujant fiksuotu aukščiu arba device-height, gali atsirasti nenuoseklių išdėstymų ir netikėto slinkimo. Dauguma adaptyvių dizainų valdo vertikalius išdėstymus per turinio srautą ir slinkimo galimybę, o ne per fiksuoto aukščio peržiūros sritis.

Rekomenduojamos meta peržiūros srities žymės santrauka:

Ši viena eilutė suteikia optimalų pagrindą adaptyviajam dizainui, nurodydama naršyklei suderinti išdėstymo peržiūros srities plotį su įrenginio pločiu ir nustatant nemasteliuotą pradinį vaizdą, o svarbiausia – leidžiant vartotojams laisvai priartinti dėl prieinamumo.

Peržiūros srities vienetai: daugiau nei pikseliai dinaminiam dydžio nustatymui

Nors tradiciniai CSS vienetai, tokie kaip pikseliai (px), em ir rem, yra galingi, peržiūros srities vienetai siūlo unikalų būdą nustatyti elementų dydį atsižvelgiant į pačios peržiūros srities matmenis. Šie vienetai yra ypač naudingi kuriant dinamiškus ir lanksčius išdėstymus, kurie savaime reaguoja į vartotojo ekrano dydį, nesiremiant vien medijos užklausomis kiekvienam proporcingam koregavimui. Jie atspindi išdėstymo peržiūros srities matmenų procentinę dalį, suteikdami tiesioginę kontrolę elemento dydžiui, palyginti su matoma ekrano sritimi.

vw (Viewport Width – peržiūros srities plotis)

• Apibrėžimas: 1vw yra lygus 1% išdėstymo peržiūros srities pločio.
• Pavyzdys: Jei išdėstymo peržiūros sritis yra 360px pločio (kaip įprastame mobiliajame įrenginyje su width=device-width), tuomet 10vw būtų 36px (10% iš 360px). Jei peržiūros sritis išsiplečia iki 1024px planšetėje, tuomet 10vw taptų 102.4px.
• Naudojimo atvejis: Idealus tipografijai, paveikslėlių dydžiui ar konteinerių pločiui, kurie turi proporcingai keistis kartu su ekrano pločiu. Pavyzdžiui, nustatant šrifto dydžius su vw galima užtikrinti, kad tekstas išliks įskaitomas įvairaus dydžio ekranuose be nuolatinių medijos užklausų korekcijų kiekvienam lūžio taškui.
• Kodo pavyzdys:
  

  h1 { font-size: 8vw; }

  .hero-image { width: 100vw; height: auto; }

vh (Viewport Height – peržiūros srities aukštis)

• Apibrėžimas: 1vh yra lygus 1% išdėstymo peržiūros srities aukščio.
• Pavyzdys: Jei išdėstymo peržiūros sritis yra 640px aukščio, tuomet 50vh būtų 320px (50% iš 640px).
• Naudojimo atvejis: Puikiai tinka kurti viso ekrano sekcijas, pagrindines antraštes ar elementus, kurie turi užimti tam tikrą matomo ekrano aukščio procentą. Dažnas pritaikymas yra sukurti pagrindinę sekciją, kuri visada užpildo ekraną, nepriklausomai nuo įrenginio orientacijos ar dydžio.
• Kodo pavyzdys:
  

  .full-screen-section { height: 100vh; }

vmin (Viewport Minimum – peržiūros srities minimumas) ir vmax (Viewport Maximum – peržiūros srities maksimumas)

Šie vienetai yra retesni, tačiau siūlo galingas galimybes užtikrinti adaptyvumą, pagrįstą mažesniuoju arba didesniuoju peržiūros srities matmeniu.

• vmin apibrėžimas: 1vmin yra lygus 1% mažesniojo išdėstymo peržiūros srities matmens (pločio ar aukščio).
• vmin pavyzdys: Jei peržiūros sritis yra 360px pločio ir 640px aukščio, 1vmin būtų 3.6px (1% iš 360px). Jei vartotojas pasuka įrenginį į horizontalią padėtį (pvz., 640px pločio ir 360px aukščio), 1vmin vis tiek būtų 3.6px (1% iš 360px).
• vmin naudojimo atvejis: Naudingas elementams, kurie turėtų mažėti atsižvelgiant į tai, kuris matmuo (plotis ar aukštis) yra labiau ribojantis. Tai gali padėti išvengti, kad elementai taptų per dideli viename matmenyje, o kitame išliktų per maži, ypač dirbant su kvadratiniais elementais ar piktogramomis, kurios turi sklandžiai tilpti tiek portreto, tiek peizažo orientacijose.
• Kodo pavyzdys:
  

  .square-icon { width: 10vmin; height: 10vmin; }

• vmax apibrėžimas: 1vmax yra lygus 1% didesniojo išdėstymo peržiūros srities matmens (pločio ar aukščio).
• vmax pavyzdys: Jei peržiūros sritis yra 360px pločio ir 640px aukščio, 1vmax būtų 6.4px (1% iš 640px). Jei vartotojas pasuka įrenginį į horizontalią padėtį (pvz., 640px pločio ir 360px aukščio), 1vmax vis tiek būtų 6.4px (1% iš 640px).
• vmax naudojimo atvejis: Idealus elementams, kurie visada turėtų būti matomi ir augti kartu su didžiausiu ekrano matmeniu, užtikrinant, kad jie niekada netaptų per maži, kad būtų įskaitomi ar interaktyvūs. Pavyzdžiui, didelis fono paveikslėlis ar svarbus teksto blokas, kuris visada turėtų užimti didelę ekrano dalį.
• Kodo pavyzdys:
  

  .background-text { font-size: 5vmax; }

Praktiniai pritaikymai ir svarstymai dėl peržiūros srities vienetų

Peržiūros srities vienetai, nors ir galingi, reikalauja kruopštaus įgyvendinimo:

• Tipografija: Derinant vw su rem ar em vienetais (naudojant calc()), galima sukurti lanksčią tipografiją, kuri puikiai masteliuojasi. Pavyzdžiui, nustatant font-size: calc(1rem + 0.5vw);, šrifto dydžiai šiek tiek prisitaiko prie peržiūros srities pločio, tuo pačiu išlaikant tvirtą pagrindą.
• Išdėstymai: Elementams, kurie turi užimti tam tikrą ekrano dalį, pvz., šoninėms juostoms ar turinio stulpeliams lanksčiame tinklelyje, peržiūros srities vienetai siūlo tiesioginį sprendimą.
• Paveikslėlių dydžio nustatymas: Nors max-width: 100% yra standartas adaptyviems paveikslėliams, naudojant vw paveikslėlių matmenims gali būti naudinga specifiniams dizaino elementams, kurie turi tiksliai užpildyti tam tikrą ekrano pločio procentą.
• Naršyklių suderinamumas: Peržiūros srities vienetai yra plačiai palaikomi šiuolaikinėse naršyklėse, įskaitant mobiliąsias naršykles. Tačiau būkite atidūs dėl specifinių naršyklių ypatumų, ypač dėl vh vieneto mobiliuosiuose įrenginiuose, kuris aptariamas vėlesniuose skyriuose.
• Perdėtas mastelio keitimas: Būkite atsargūs naudodami peržiūros srities vienetus labai mažiems ar labai dideliems elementams. Šrifto dydis 1vw gali tapti neįskaitomai mažas mažame telefone, o 50vw gali būti pernelyg didelis plačiame stalinio kompiuterio monitoriuje. Derinant juos su min() ir max() CSS funkcijomis galima apriboti jų diapazoną.

Adaptyvusis dizainas ir peržiūros srities valdymas: galinga sąjunga

Peržiūros srities valdymas, ypač per meta peržiūros srities žymę, yra pagrindas, ant kurio statomas šiuolaikinis adaptyvusis interneto dizainas. Be jo CSS medijos užklausos būtų didžiąja dalimi neveiksmingos mobiliuosiuose įrenginiuose. Tikroji galia atsiskleidžia, kai šios dvi technologijos veikia kartu, leisdamos jūsų svetainei sklandžiai prisitaikyti prie bet kokio ekrano dydžio, orientacijos ir raiškos visame pasaulyje.

Sinergija su CSS medijos užklausomis

CSS medijos užklausos leidžia taikyti skirtingus stilius, atsižvelgiant į įvairias įrenginio charakteristikas, tokias kaip ekrano plotis, aukštis, orientacija ir raiška. Kartu su , medijos užklausos tampa neįtikėtinai tikslios ir patikimos.

• Kaip jos veikia kartu:
  • Meta peržiūros srities žymė užtikrina, kad width=device-width tiksliai nustato išdėstymo peržiūros sritį pagal tikrąjį įrenginio plotį CSS pikseliais.
  • Tada medijos užklausos naudoja šį tikslų išdėstymo peržiūros srities plotį stiliams taikyti. Pavyzdžiui, užklausa, tokia kaip @media (max-width: 600px) { ... }, teisingai nukreips į įrenginius, kurių efektyvusis plotis yra 600px ar mažesnis, nepriklausomai nuo jų numatytojo „panašaus į stalinio kompiuterio“ išdėstymo peržiūros srities nustatymo.
• Įprasti lūžio taškai (globali perspektyva): Nors konkrečios lūžio taškų reikšmės gali skirtis priklausomai nuo turinio ir dizaino, bendra strategija yra nukreipti į bendrines įrenginių kategorijas:
  • Maži mobilieji: @media (max-width: 375px) { ... } (nukreipta į labai mažus telefonus)
  • Mobilieji: @media (max-width: 767px) { ... } (bendri išmanieji telefonai, portreto režimas)
  • Planšetės: @media (min-width: 768px) and (max-width: 1023px) { ... } (planšetės, maži nešiojamieji kompiuteriai)
  • Staliniai kompiuteriai: @media (min-width: 1024px) { ... } (didesni ekranai)
• Medijos užklausų kodo pavyzdys:
  

  /* Numatytieji stiliai didesniems ekranams */

  body { font-size: 18px; }

  .container { max-width: 1200px; margin: 0 auto; }

  /* Stiliai ekranams iki 767px pločio (pvz., dauguma išmaniųjų telefonų) */

  @media (max-width: 767px) {

    body { font-size: 16px; }

    .container { width: 95%; padding: 0 10px; }

    .navigation { flex-direction: column; }

  }

„Mobile-First“ kūrimo strategijos

„Mobile-first“ (pirmiausia mobiliesiems) koncepcija yra galinga paradigma adaptyviajame interneto dizaine, tiesiogiai išnaudojanti peržiūros srities valdymą. Vietoj to, kad būtų kuriama staliniams kompiuteriams ir tada pritaikoma mobiliesiems, „mobile-first“ pasisako už pagrindinės patirties kūrimą pirmiausia mažiausiems ekranams, o tada laipsnišką jos tobulinimą didesnėms peržiūros sritims.

• Kodėl „Mobile-First“?
  • Našumas: Užtikrina, kad mobilieji vartotojai, dažnai naudojantys lėtesnius tinklus ir mažiau galingus įrenginius, gautų tik būtinus stilius ir resursus, o tai lemia greitesnį įkėlimo laiką.
  • Turinio prioritetizavimas: Verčia programuotojus teikti pirmenybę turiniui ir funkcionalumui, nes ekrano erdvė yra ribota.
  • Laipsniškas tobulinimas: Didėjant ekranams, „pridedate“ stilius (pvz., sudėtingesnius išdėstymus, didesnes nuotraukas) naudodami min-width medijos užklausas. Tai užtikrina, kad pagrindinė patirtis visada yra optimizuota mobiliesiems įrenginiams.
  • Pasaulinis prieinamumas: Daugelyje regionų, ypač besivystančiose rinkose, naudojami tik mobilieji įrenginiai. „Mobile-first“ požiūris iš esmės tenkina didžiąją dalį pasaulinės interneto populiacijos.
• Įgyvendinimas:
  1. Pradėkite nuo bazinio CSS, kuris taikomas visiems ekrano dydžiams (pirmiausia mobiliesiems).
  2. Naudokite min-width medijos užklausas, kad pridėtumėte stilius laipsniškai didesniems ekranams.

     /* Baziniai stiliai (mobile-first) */

     .element { width: 100%; padding: 10px; }

     /* Taikyti platesnį plotį planšetėms ir didesniems įrenginiams */

     @media (min-width: 768px) {

       .element { width: 50%; float: left; }

     }

     /* Taikyti dar platesnį plotį staliniams kompiuteriams */

     @media (min-width: 1024px) {

       .element { width: 33%; }

     }

Skirtingų įrenginio pikselių santykių (DPR) tvarkymas

Šiuolaikiniai mobilieji įrenginiai, ypač aukštos klasės išmanieji telefonai ir planšetės, dažnai turi labai didelį pikselių tankį, o tai lemia įrenginio pikselių santykį (Device Pixel Ratio, DPR), didesnį nei 1. DPR lygus 2 reiškia, kad 1 CSS pikselis atitinka 2 fizinius įrenginio pikselius. Nors meta peržiūros srities žymė tvarko išdėstymo peržiūros srities masteliavimą atsižvelgiant į įrenginio nepriklausomus pikselius, paveikslėliams ir kitiems medijos resursams reikia ypatingo dėmesio, kad jie atrodytų ryškūs didelio DPR ekranuose (dažnai vadinamuose „Retina“ ekranais).

• Kodėl tai svarbu: Jei pateiksite 100x100 pikselių paveikslėlį įrenginiui, kurio DPR yra 2, jis atrodys neryškus, nes naršyklė jį iš esmės ištempia, kad užpildytų 200 fizinių pikselių plotą.
• Sprendimai:
  • Adaptyvūs paveikslėliai (srcset ir sizes): HTML žymės srcset atributas leidžia nurodyti kelis paveikslėlių šaltinius skirtingiems pikselių tankiams ir peržiūros srities dydžiams. Naršyklė tada pasirenka tinkamiausią paveikslėlį.
    Tai nurodo naršyklei naudoti `image-lowres.jpg` standartiniams ekranams ir `image-highres.jpg` didelio DPR ekranams. Taip pat galite derinti tai su `sizes` adaptyviems ploščiams.

    

  • CSS medijos užklausos raiškai: Nors rečiau naudojamos paveikslėliams, galite naudoti medijos užklausas, kad pateiktumėte skirtingus fono paveikslėlius ar stilius, atsižvelgiant į raišką.

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {   body { background-image: url('high-res-background.jpg'); } }

  • SVG ir piktogramų šriftai: Vektorinei grafikai ir piktogramoms SVG (Scalable Vector Graphics) ir piktogramų šriftai (pvz., Font Awesome) yra idealūs, nes jie yra nepriklausomi nuo raiškos ir puikiai masteliuojasi bet kokiam DPR be kokybės praradimo.

Dažniausi peržiūros srities iššūkiai ir sprendimai

Nepaisant galingų peržiūros srities valdymo galimybių, programuotojai dažnai susiduria su specifiniais iššūkiais, kurie gali sutrikdyti mobiliųjų vartotojų patirtį. Suprasti šias dažnas problemas ir jų sprendimus yra labai svarbu kuriant atsparias interneto programas pasaulinei auditorijai.

„100vh“ problema mobiliosiose naršyklėse

Viena iš labiausiai įsisenėjusių ir varginančių problemų front-end programuotojams yra nenuoseklus 100vh vieneto elgesys mobiliosiose naršyklėse. Nors 100vh teoriškai reiškia „100% peržiūros srities aukščio“, mobiliuosiuose įrenginiuose dinaminės naršyklės įrankių juostos (adreso juosta, naršymo juosta) dažnai užstoja dalį ekrano, todėl 100vh nurodo peržiūros srities aukštį, kai šios įrankių juostos nėra matomos. Kai vartotojas slenka, šios įrankių juostos dažnai pasislepia, išplėsdamos vaizdinę peržiūros sritį, tačiau 100vh reikšmė dinamiškai neatsinaujina, todėl elementai tampa per aukšti arba sukelia netikėtą slinkimą.

• Problema: Jei nustatote height: 100vh; viso ekrano hero sekcijai, įkeliant puslapį, ji gali išsikišti žemiau matomos dalies, nes 100vh nurodo aukštį, kai dinaminės įrankių juostos yra paslėptos, net jei jos iš pradžių yra matomos.
• Sprendimai:
  • Naudojant naujus peržiūros srities vienetus (CSS darbinis projektas): Šiuolaikinis CSS pristato naujus vienetus, kurie specialiai sprendžia šią problemą:
    • svh (Small Viewport Height): 1% peržiūros srities aukščio, kai matomos dinaminės įrankių juostos.
    • lvh (Large Viewport Height): 1% peržiūros srities aukščio, kai dinaminės įrankių juostos yra paslėptos.
    • dvh (Dynamic Viewport Height): 1% peržiūros srities aukščio, dinamiškai prisitaikantis, kai įrankių juostos atsiranda/dingsta.

    Šie vienetai siūlo patikimiausią ir elegantiškiausią sprendimą, tačiau jų naršyklių palaikymas vis dar vystosi. Galite juos naudoti su atsarginėmis galimybėmis:

    .hero-section {   height: 100vh; /* Atsarginė galimybė senesnėms naršyklėms */   height: 100dvh; /* Naudoti dinaminį peržiūros srities aukštį */ }

  • JavaScript sprendimas: Dažnas ir plačiai palaikomas sprendimas yra naudoti JavaScript, kad apskaičiuotumėte tikrąjį lango vidinį aukštį ir pritaikytumėte jį kaip CSS kintamąjį arba inline stilių.

    // JavaScript kode:

    function setDocHeight() {

      document.documentElement.style.setProperty('--doc-height', `${window.innerHeight}px`);

    }

    window.addEventListener('resize', setDocHeight);

    setDocHeight();

    /* CSS kode: */

    .hero-section { height: var(--doc-height); }

    Šis metodas nuosekliai prisitaiko prie tikrojo matomo aukščio.

Netikėtos priartinimo problemos

Nors meta peržiūros srities žymė su initial-scale=1.0 paprastai apsaugo nuo netikėto pradinio priartinimo, kiti elementai kartais gali sukelti nepageidaujamą padidinimą, ypač iOS įrenginiuose.

• Įvesties laukų priartinimas sufokusavus (iOS): Kai vartotojas paliečia įvesties lauką (, </b>, <b><select></b>) iOS įrenginyje, naršyklė gali automatiškai priartinti vaizdą, todėl turinį tampa sunku skaityti arba sukeliami išdėstymo poslinkiai. Tai yra „prieinamumo funkcija“, skirta užtikrinti, kad įvesties laukas būtų pakankamai didelis sąveikai, tačiau tai gali sutrikdyti adaptyvų dizainą. <ul> <li><b>Sprendimas:</b> Nustatant bent <b>16px</b> šrifto dydį įvesties laukams, dažnai išvengiama šio automatinio priartinimo elgesio iOS. <b><p><code>input, textarea, select { font-size: 16px; }</code></p></b> </li> </ul> </li> <li><b>CSS transformacijos ir priartinimas:</b> Tam tikros CSS transformacijos (pvz., <b>transform: scale()</b>) ar savybės, tokios kaip <b>zoom</b>, kartais gali nenuspėjamai sąveikauti su peržiūros sritimi, ypač jei jos nėra atidžiai kontroliuojamos adaptyviame kontekste.</li> </ul> <h3>Peržiūros srities dydžio keitimas rodant klaviatūrą</h3> <p>Kai mobiliajame įrenginyje pasirodo virtuali klaviatūra, ji paprastai sumažina vaizdinės peržiūros srities aukštį. Tai gali sukelti didelius išdėstymo poslinkius, stumiant turinį aukštyn, uždengiant laukus arba priverčiant netikėtai slinkti.</p> <ul> <li><b>Problema:</b> Jei ekrano apačioje turite formą ir pasirodo klaviatūra, įvesties laukai gali būti uždengti. Naršyklė gali bandyti nuslinkti sufokusuotą elementą į matomą sritį, tačiau tai vis tiek gali būti trikdantis potyris.</li> <li><b>Elgesio skirtumai:</b> <ul> <li><b>iOS:</b> Paprastai išdėstymo peržiūros srities matmenys nesikeičia, kai pasirodo klaviatūra. Naršyklė slenka puslapį, kad sufokusuota įvestis atsidurtų vaizdinėje peržiūros srityje.</li> <li><b>Android:</b> Elgesys gali labiau skirtis. Kai kurios Android naršyklės keičia išdėstymo peržiūros srities dydį, o kitos elgiasi panašiau į iOS.</li> </ul> </li> <li><b>Sprendimai:</b> <ul> <li><b>Naudokite `resize` meta žymės reikšmę (Atsargiai!):</b> <b><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"></b>. `interactive-widget` savybė yra besivystantis standartas, skirtas valdyti šį elgesį, tačiau jo palaikymas nėra universalus.</li> <li><b>Slinkimas prie elemento naudojant JavaScript:</b> Kritiniams įvesties laukams galite naudoti JavaScript, kad programiškai nuslinktumėte juos į matomą sritį sufokusavus, galbūt su nedideliu poslinkiu, kad užtikrintumėte, jog aplinkinis kontekstas būtų matomas.</li> <li><b>Išdėstymo dizainas:</b> Kurkite formas ir interaktyvius elementus viršutinėje ekrano dalyje arba užtikrinkite, kad jie būtų įdėti į slankųjį konteinerį, kad sklandžiai tvarkytųsi su klaviatūros pasirodymu. Venkite dėti kritinę informaciją ar mygtukus pačioje ekrano apačioje, jei jie nėra skirti slinkti.</li> <li><b>`visualViewport` API:</b> Pažangesniems scenarijams JavaScript `window.visualViewport` API suteikia informacijos apie vaizdinės peržiūros srities dydį ir padėtį, leidžiant atlikti tikslesnius koregavimus atsižvelgiant į klaviatūrą. <b><p><code>window.visualViewport.addEventListener('resize', () => {</code></p> <p><code>  console.log('Visual viewport height:', window.visualViewport.height);</code></p> <p><code>});</code></p></b> </li> </ul> </li> </ul> <h2>Pažangesni peržiūros srities aspektai</h2> <p>Be pagrindinių savybių ir dažniausiai pasitaikančių iššūkių, keletas pažangesnių aspektų gali dar labiau patobulinti jūsų mobiliosios peržiūros srities valdymą, lemiantį labiau nušlifuotą ir našesnę vartotojo patirtį.</p> <h3>Orientacijos pokyčiai</h3> <p>Mobiliuosius įrenginius galima laikyti portreto arba peizažo orientacija, o tai drastiškai keičia turimus ekrano matmenis. Jūsų dizainas turi sklandžiai atsižvelgti į šiuos pokyčius.</p> <ul> <li><b>CSS medijos užklausos orientacijai:</b> Medijos funkcija <b>orientation</b> leidžia taikyti specifinius stilius, atsižvelgiant į įrenginio orientaciją. <b><p><code>/* Portreto režimo stiliai */</code></p> <p><code>@media (orientation: portrait) {   .some-element { width: 90%; } }</code></p> <p><code>/* Peizažo režimo stiliai */</code></p> <p><code>@media (orientation: landscape) {   .some-element { width: 60%; } }</code></p></b> </li> <li><b>Lankstūs išdėstymai:</b> Pasikliauti lanksčiuoju laukeliu (Flexbox) ir tinkleliu (CSS Grid) yra labai svarbu. Šie išdėstymo moduliai savaime prisitaiko prie turimos erdvės, todėl yra daug atsparesni orientacijos pokyčiams nei fiksuoto pločio ar pozicija pagrįsti išdėstymai.</li> <li><b>Turinio įskaitomumas:</b> Užtikrinkite, kad teksto eilutės netaptų pernelyg ilgos peizažo režimu didelėse planšetėse arba per trumpos portreto režimu labai mažuose telefonuose. Šrifto dydžių ir eilučių aukščių koregavimas medijos užklausose orientacijai gali padėti.</li> </ul> <h3>Prieinamumas ir vartotojo kontrolė</h3> <p>Jau minėjome tai, bet verta pakartoti: prieinamumas niekada neturėtų būti antrinis dalykas. Peržiūros srities valdymas atlieka svarbų vaidmenį, kad interneto turinys būtų prieinamas visiems vartotojams, nepriklausomai nuo jų gebėjimų ar įrenginių.</p> <ul> <li><b>Neišjunkite priartinimo:</b> Kaip jau buvo pabrėžta anksčiau, nustačius <b>user-scalable=no</b> arba <b>maximum-scale=1.0</b>, galima smarkiai pakenkti vartotojams su regėjimo sutrikimais, kurie pasikliauja naršyklės priartinimu. Visada teikite pirmenybę vartotojo kontrolei turinio mastelio keitimo atžvilgiu. Tai atitinka WCAG 2.1 sėkmės kriterijus 1.4.4 (Teksto dydžio keitimas) ir 1.4.10 (Pertvarkymas), pabrėžiant, kad turinys turi išlikti naudojamas, kai priartinamas iki 200% arba rodomas viename stulpelyje be horizontalaus slinkimo.</li> <li><b>Pakankami lietimo taikiniai:</b> Užtikrinkite, kad interaktyvūs elementai (mygtukai, nuorodos) būtų pakankamai dideli ir turėtų pakankamai tarpo tarpusavyje, kad būtų lengvai paspaudžiami jutikliniuose ekranuose, net ir priartinus. Minimalus 44x44 CSS pikselių dydis yra dažna rekomendacija.</li> <li><b>Kontrastas ir įskaitomumas:</b> Išlaikykite pakankamą spalvų kontrastą ir naudokite įskaitomus šrifto dydžius, kurie gerai masteliuojasi su peržiūros sritimi.</li> </ul> <h3>Našumo pasekmės</h3> <p>Efektyvus peržiūros srities valdymas taip pat prisideda prie bendro jūsų interneto programos našumo mobiliuosiuose įrenginiuose.</p> <ul> <li><b>Efektyvus resursų įkėlimas:</b> Teisingai nustačius peržiūros sritį ir naudojant adaptyvių paveikslėlių technikas (<b>srcset</b>, <b>sizes</b>), užtikrinate, kad mobilieji įrenginiai atsisiųstų tik jų ekrano dydžiui ir DPR tinkamus paveikslėlius ir resursus, sumažinant nereikalingą duomenų srauto suvartojimą ir pagerinant įkėlimo laiką. Tai ypač svarbu vartotojams, naudojantiems apmokestinamus duomenų planus arba regionuose su mažiau išvystyta interneto infrastruktūra.</li> <li><b>Sumažinti perbraižymai ir perskaičiavimai:</b> Gerai struktūrizuotas adaptyvus išdėstymas, kuris sklandžiai prisitaiko per medijos užklausas ir lanksčius vienetus (pvz., peržiūros srities vienetus ar procentus), linkęs sukelti mažiau brangių išdėstymo perskaičiavimų (reflows) ir perbraižymų, palyginti su fiksuoto pločio išdėstymais, kurie gali sukelti sudėtingus mastelio keitimo algoritmus arba reikalauti nuolatinių JavaScript korekcijų.</li> <li><b>Horizontalaus slinkimo išvengimas:</b> Vienas didžiausių našumo ir vartotojo patirties trūkumų mobiliuosiuose įrenginiuose yra atsitiktinis horizontalus slinkimas. Tinkamai sukonfigūruota peržiūros sritis su adaptyviu dizainu užtikrina, kad turinys tilptų ekrane, panaikinant poreikį horizontalaus slinkimo, kuris ne tik erzina vartotojus, bet ir gali būti skaičiavimo požiūriu intensyvus naršyklei.</li> <li><b>Optimizuotas kritinis atvaizdavimo kelias:</b> Įdėjus meta peržiūros srities žymę kuo anksčiau <b><head></b> sekcijoje, užtikrinama, kad naršyklė nuo pat pradžių žinotų, kaip teisingai atvaizduoti puslapį, išvengiant „blyksnio be stiliaus turinio“ arba pradinio neteisingo priartinimo lygio, kurį vėliau reikia taisyti.</li> </ul> <h2>Geriausios peržiūros srities valdymo praktikos</h2> <p>Efektyvaus peržiūros srities valdymo įgyvendinimas yra nuolatinis projektavimo, kūrimo ir testavimo procesas. Laikantis šių geriausių praktikų, padėsite sukurti universaliai prieinamas ir našias mobiliąsias interneto patirtis.</p> <ul> <li><b>Visada įtraukite standartinę meta peržiūros srities žymę:</b> Tai yra nediskutuotinas pirmas žingsnis bet kuriai adaptyviai svetainei. <b><p><code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></p></b> Ji suteikia optimalų atspirties tašką šiuolaikiniam adaptyviam interneto kūrimui.</li> <li><b>Naudokite lanksčius išdėstymus:</b> Teikite pirmenybę CSS Flexbox ir Grid išdėstymo kūrimui. Šie įrankiai yra sukurti vidiniam adaptyvumui ir daug geriau prisitaiko prie kintančių ekrano dydžių ir orientacijų nei senesnės, fiksuoto pločio išdėstymo technikos.</li> <li><b>Taikykite „Mobile-First“ požiūrį:</b> Kurkite pirmiausia mažiausiems ekranams, o tada laipsniškai tobulinkite didesnėms peržiūros sritims naudodami <b>min-width</b> medijos užklausas. Tai verčia teikti pirmenybę turiniui ir optimizuoja našumą daugumai pasaulio mobiliųjų vartotojų.</li> <li><b>Kruopščiai testuokite įvairiuose įrenginiuose ir naršyklėse:</b> Emuliatoriai ir kūrėjų įrankiai yra naudingi, tačiau testavimas tikruose įrenginiuose yra neįkainojamas. Testuokite įvairiuose realiuose įrenginiuose – senesniuose ir naujesniuose išmaniuosiuose telefonuose, planšetėse ir skirtingose operacinėse sistemose (iOS, Android) – bei įvairiose naršyklėse (Chrome, Safari, Firefox, Edge, Samsung Internet, UC Browser ir kt.), kad aptiktumėte subtilius neatitikimus peržiūros srities elgesyje ar atvaizdavime. Atkreipkite dėmesį, kaip jūsų svetainė elgiasi skirtinguose regionuose, jei jūsų paslauga turi specifinių rinkos akcentų.</li> <li><b>Optimizuokite paveikslėlius kelioms raiškoms:</b> Išnaudokite <b>srcset</b> ir <b>sizes</b> atributus paveikslėliams arba naudokite SVG vektorinei grafikai, kad užtikrintumėte ryškius vaizdus didelio DPR ekranuose, nepateikiant nereikalingai didelių failų standartiniams ekranams.</li> <li><b>Teikite pirmenybę prieinamumui:</b> Niekada neišjunkite vartotojo priartinimo. Projektuokite su pakankamai dideliais lietimo taikiniais ir užtikrinkite, kad turinys gerai persitvarkytų, kai yra padidinamas. Prieinamas dizainas yra geras dizainas visiems, tenkinantis įvairią pasaulinę vartotojų bazę.</li> <li><b>Sklandžiai spręskite 100vh iššūkį:</b> Būkite informuoti apie `100vh` klaidą mobiliuosiuose įrenginiuose ir įgyvendinkite naujus peržiūros srities vienetus (`dvh`, `svh`, `lvh`) su atsarginėmis galimybėmis arba naudokite JavaScript sprendimus, kur būtina, kad užtikrintumėte, jog viso aukščio elementai elgtųsi nuspėjamai.</li> <li><b>Nuolat stebėkite ir prisitaikykite:</b> Mobiliųjų technologijų peizažas nuolat keičiasi. Nauji įrenginiai, ekrano dydžiai, naršyklių atnaujinimai ir besivystantys standartai (pvz., nauji peržiūros srities vienetai ar `interactive-widget`) reiškia, kad peržiūros srities strategijas gali tekti periodiškai peržiūrėti ir koreguoti. Būkite informuoti apie naujausias interneto kūrimo geriausias praktikas ir naršyklių galimybes.</li> </ul> <h2>Išvada</h2> <p>CSS peržiūros srities taisyklė, paremta meta peržiūros srities žyme ir papildyta adaptyviojo dizaino principais, nėra tik techninė detalė; tai yra vartai į išskirtinių ir įtraukių interneto patirčių teikimą mobiliuosiuose įrenginiuose visame pasaulyje. Pasaulyje, kuriame vis labiau dominuoja mobilusis internetas, tinkamo peržiūros srities valdymo nepaisymas reiškia atstumti didelę dalį savo potencialios auditorijos, nesvarbu, ar jie pasiekia jūsų turinį iš šurmuliuojančių miestų centrų, ar iš atokių kaimų.</p> <p>Kruopščiai taikydami rekomenduojamus meta peržiūros srities nustatymus, išnaudodami peržiūros srities vienetų lankstumą, protingai derindami juos su CSS medijos užklausomis „mobile-first“ paradigmoje ir aktyviai spręsdami dažniausiai pasitaikančius iššūkius, programuotojai gali atskleisti visą adaptyviojo dizaino potencialą. Tikslas yra sukurti svetaines, kurios būtų ne tik „draugiškos mobiliesiems“, bet ir tikrai „pritaikytos mobiliesiems“ – sklandžiai prisitaikančios prie bet kurio įrenginio, suteikiančios vartotojams galimybę be vargo sąveikauti su turiniu ir užtikrinančios, kad jūsų skaitmeninė erdvė būtų universaliai prieinama ir maloni, nepriklausomai nuo ekrano dydžio ar geografinės vietos. Peržiūros srities įsisavinimas yra esminis įgūdis kiekvienam šiuolaikiniam interneto programuotojui, kuriančiam pasauliniam skaitmeniniam peizažui.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">CSS peržiūros srities taisyklė</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Mobiliosios peržiūros srities valdymas</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Adaptyvusis dizainas</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Interneto svetainių kūrimas</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Front-end programavimas</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Meta peržiūros srities žymė</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Peržiūros srities vienetai</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Įrenginio plotis</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Pradinis mastelis</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Vartotojo mastelio keitimas</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Pikselių tankis</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">DPR</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Išdėstymo peržiūros sritis</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Vaizdinė peržiūros sritis</span><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Fiksuota peržiūros sritis</span></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Adaptyvus dizainas</span></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Medijos užklausos</span></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Naršyklių suderinamumas</span></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Našumo optimizavimas</span></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Vartotojo patirtis</span></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Pasaulinis internetas</span></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Kelių naršyklių kūrimas</span></div><script>$RS("S:b","P:b")</script><script>$RC("B:1","S:1")</script></body></html>