Meta
Etiketa viewport
Etiketa që i thotë shfletuesit mobil ta renderojë faqen në gjerësinë e ekranit; pa të, faqja shfaqet e zvogëluar.
Çfarë është
<meta name="viewport"> përcakton se si shfletuesi mobil e llogarit gjerësinë e dritares virtuale ku renderohet faqja. Pa këtë etiketë shfletuesit mobilë supozojnë një gjerësi prej rreth 980 pikselësh dhe pastaj e zvogëlojnë gjithë faqen që të futet në ekran.
Rezultati është një faqe që duket si versioni desktop i parë nga larg: teksti i palexueshëm, butonat shumë të vegjël për t'u prekur. Vlera standarde width=device-width, initial-scale=1 i thotë shfletuesit ta trajtojë gjerësinë reale të pajisjes si gjerësi të faqes.
Pse ka rëndësi
Shumica e trafikut të kërkimit sot vjen nga pajisje mobile, dhe motorët e vlerësojnë faqen nga versioni mobil i saj. Një faqe pa viewport nuk është thjesht e shëmtuar në telefon — ajo dështon në kriterin bazë të përdorshmërisë mobile dhe kjo ndikon te renditja.
Pasoja e drejtpërdrejtë matet te vizitori: një faqe ku duhet të zmadhosh me gishta për të lexuar një çmim braktiset. Për faqe tregtare kjo është humbje e drejtpërdrejtë shitjeje.
Gabimi i kundërt ekziston gjithashtu: një viewport që e ndalon zmadhimin (user-scalable=no ose maximum-scale=1) e bën faqen të papërdorshme për njerëz me shikim të dobët, dhe kjo është shkelje aksesueshmërie, jo zgjedhje dizajni.
Si rregullohet
Vendos etiketën si një nga rreshtat e parë të <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Hapat:
- Mos shto `user-scalable=no` dhe mos e kufizo `maximum-scale`. Zmadhimi duhet të mbetet i mundur.
- Kontrollo pastaj gjerësitë e fiksuara në CSS. Etiketa e vetme nuk mjafton nëse faqja ka
width: 1200pxdiku; do të prodhojë rrëshqitje horizontale. - Testo në një ekran 360 pikselësh, jo në dritaren e ngushtuar të desktopit.
- Kujdes me imazhet dhe tabelat, që e zgjerojnë faqen edhe kur gjithçka tjetër është e rrjedhshme.
Si e mat ky mjet
Dy klasa e kontrollojnë të njëjtën gjë veçmas. MetaAnalyzer::analyzeViewport() (services/MetaAnalyzer.php:140) lexon //meta[@name="viewport"]/@content dhe, kur mungon, jep një konstatim kritik me tekstin e gatshëm të etiketës (:147). TechnicalAnalyzer::checkMobileFriendliness() (services/TechnicalAnalyzer.php:98) bën të njëjtin kërkim dhe jep një konstatim të dytë kritik (:107).
Pra mungesa e viewport-it shfaqet dy herë në raport, nga dy analizues të ndryshëm.
Çfarë NUK e mat
Kontrolli mat vetëm nëse etiketa ekziston. Përmbajtja e saj nuk analizohet: një content="width=1200" ose një user-scalable=no kalon si i rregullt. Mjeti nuk e vlerëson dot as nëse faqja ka vërtet layout të rrjedhshëm — një faqe me viewport të saktë dhe një tabelë 1400 pikselësh raportohet si miqësore me mobilin. Dublimi i konstatimit midis dy analizuesve e fryn artificialisht numrin e problemeve në raport.
Kodi që e kryen matjen
services/MetaAnalyzer.php:140— MetaAnalyzer::analyzeViewportservices/TechnicalAnalyzer.php:98— TechnicalAnalyzer::checkMobileFriendliness