Problemi kryesor në lidhje me ndryshimin e pamjes së HTML në madhësinë e smartfonit është se mund të shkaktojë që faqja e internetit të mos reagojë ose të shfaqet gabimisht. Kjo ndodh sepse kur ndryshohet porta e shikimit, faqja e internetit mund të mos jetë e optimizuar për një madhësi më të vogël ekrani dhe mund të mos jetë në gjendje të zvogëlojë siç duhet përmbajtjen e saj. Për më tepër, disa veçori mund të mos funksionojnë siç duhet në një madhësi më të vogël të ekranit, të tilla si menutë e navigimit ose elementët ndërveprues.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Kjo linjë kodi është një meta etiketë, e cila i jep shfletuesit informacion rreth dokumentit HTML.
2. Atributi i emrit është vendosur në "viewport", i cili i tregon shfletuesit se kjo etiketë përmban informacione se si duhet të shfaqet faqja në pajisje të ndryshme.
3. Atributi i përmbajtjes vendoset në "gjerësi=gjerësi pajisje, shkallë fillestare=1.0", që i tregon shfletuesit se duhet të përdorë gjerësinë e pajisjes si gjerësinë e faqes dhe ta zvogëlojë atë lart ose poshtë nëse është e nevojshme.
Dizajn i përgjegjshëm i Uebit
Dizajni i përgjegjshëm i uebit është një qasje ndaj dizajnit të uebit që i bën faqet e internetit të paraqiten mirë në një sërë pajisjesh dhe madhësive të dritareve ose ekraneve. Ai përdor një kombinim të rrjeteve fleksibël dhe paraqitjeve, imazheve dhe një përdorim inteligjent të pyetjeve të medias CSS. Uebsajtet e përgjegjshme janë krijuar për të ofruar një përvojë optimale shikimi - lexim dhe navigim i lehtë me një minimum të ndryshimit të madhësisë, panoramës dhe lëvizjes - në një gamë të gjerë pajisjesh (nga monitorët e kompjuterëve desktop te telefonat celularë).
Në HTML, dizajni i përgjegjshëm mund të arrihet duke përdorur teknikat e mëposhtme:
• Rrjete fleksibël – Përdorimi i njësive relative të tilla si përqindjet ose ems në vend të njësive me gjerësi fikse, si p.sh. pikselët për elementët e paraqitjes, lejon që faqja të përshtatet në mënyrë fleksibël me madhësi të ndryshme të ekranit.
• Pyetjet e medias – Pyetjet e medias CSS3 lejojnë zhvilluesit të specifikojnë stile të ndryshme për gjerësi të ndryshme pajisjesh. Kjo lejon që faqosja e faqes të përshtatet në përputhje me rrethanat në varësi të pajisjes që përdoret.
• Imazhet reaguese – Imazhet mund të bëhen të përgjegjshme duke përdorur atributin srcset në HTML5, i cili u lejon zhvilluesve të specifikojnë versione të shumta të një imazhi me rezolucione të ndryshme për pajisje të ndryshme.
• Video fleksibël – Videot mund të bëhen gjithashtu të përgjegjshme duke përdorur veçorinë e përshtatjes së objektit në CSS, e cila i lejon zhvilluesit të specifikojnë se si duhet të shkallëzohen videot brenda kontejnerëve të tyre në varësi të madhësisë së tyre.
Meta etiketa e portit të pamjes
Meta etiketa e portit të shikimit është një element HTML që i tregon shfletuesit se si të rregullojë dimensionet dhe shkallëzimin e faqes për t'iu përshtatur pajisjes që përdoret. Përdoret për të kontrolluar se si duket një faqe në internet në pajisje të ndryshme, të tilla si telefonat inteligjentë dhe tabletët. Meta-etiketa e portit të shikimit mund të përdoret për të vendosur gjerësinë e një faqe interneti, për ta zmadhuar ose ulur atë dhe për të specifikuar nëse përdoruesit lejohen ose jo të zmadhojnë ose zvogëlojnë. Mund të përdoret gjithashtu për të vendosur shkallën fillestare, shkallën maksimale, vetitë e shkallëzueshme nga përdoruesi dhe më shumë.
Si ta bëj faqen time të përshtatet me ekranin e telefonit tim
Për ta bërë një faqe interneti që t'i përshtatet një ekrani telefoni në HTML, mund të përdorni etiketën meta të portit të shikimit. Ky etiketë ju lejon të kontrolloni se si shfaqet faqja juaj e internetit në pajisje të ndryshme. Mund të caktoni gjerësinë e portës së pamjes të jetë e barabartë me gjerësinë e pajisjes, në mënyrë që faqja juaj e internetit të rregullojë automatikisht madhësinë e saj për t'iu përshtatur ekranit të çdo pajisjeje. Për më tepër, mund të përdorni gjithashtu pyetje mediatike në kodin tuaj CSS për të personalizuar më tej se si duket uebfaqja juaj në pajisje të ndryshme.
