Pagrindinė problema, susijusi su HTML peržiūros srities pakeitimu į išmaniojo telefono dydį, yra ta, kad dėl to svetainė gali nereaguoti arba gali būti rodoma netinkamai. Taip yra todėl, kad pakeitus peržiūros sritį, svetainė gali būti neoptimizuota mažesniam ekrano dydžiui ir gali nepavykti tinkamai sumažinti jos turinio. Be to, kai kurios funkcijos gali tinkamai neveikti mažesnio dydžio ekrane, pvz., naršymo meniu arba interaktyvūs elementai.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Ši kodo eilutė yra metažyma, kuri naršyklei pateikia informaciją apie HTML dokumentą.
2. Pavadinimo atributas nustatytas į „viewport“, kuris nurodo naršyklei, kad šioje žymoje yra informacijos apie tai, kaip puslapis turėtų būti rodomas skirtinguose įrenginiuose.
3. Turinio atributas nustatytas į „width=device-width, original-scale=1.0“, kuris nurodo naršyklei, kad ji turėtų naudoti įrenginio plotį kaip puslapio plotį ir, jei reikia, padidinti arba sumažinti jo mastelį.
Reaktyvus interneto dizainas
Interaktyvus žiniatinklio dizainas yra interneto dizaino metodas, dėl kurio tinklalapiai puikiai atvaizduojami įvairiuose įrenginiuose ir langų ar ekranų dydžiuose. Jis naudoja lanksčių tinklelių ir maketų derinį, vaizdus ir protingą CSS medijos užklausų naudojimą. Interaktyvios svetainės sukurtos taip, kad įvairiuose įrenginiuose (nuo stalinių kompiuterių monitorių iki mobiliųjų telefonų) teiktų optimalią žiūrėjimo patirtį – lengvą skaitymą ir naršymą su minimaliu dydžio keitimu, slinkimu ir slinkimu.
HTML interaktyvų dizainą galima pasiekti naudojant šiuos metodus:
• Lankstūs tinkleliai – naudojant santykinius vienetus, pvz., procentus arba ems, vietoj fiksuoto pločio vienetų, pvz., pikselių išdėstymo elementams, puslapį galima lanksčiai prisitaikyti prie skirtingų ekrano dydžių.
• Medijos užklausos – CSS3 medijos užklausos leidžia kūrėjams nurodyti skirtingus skirtingų įrenginių pločių stilius. Tai leidžia atitinkamai koreguoti puslapio išdėstymą, atsižvelgiant į naudojamą įrenginį.
• Atsakingi vaizdai – vaizdus galima padaryti reaguojančius naudojant HTML5 atributą srcset, kuris leidžia kūrėjams nurodyti kelias vaizdo versijas skirtinga skyra įvairiems įrenginiams.
• Lankstūs vaizdo įrašai – vaizdo įrašus taip pat galima pritaikyti naudojant CSS objekto pritaikymo ypatybę, kuri leidžia kūrėjams nurodyti, kaip vaizdo įrašai turėtų būti keičiami jų talpyklose, atsižvelgiant į jų dydį.
Peržiūros srities metažyma
Peržiūros srities metažyma yra HTML elementas, nurodantis naršyklei, kaip koreguoti puslapio matmenis ir mastelį, kad jis atitiktų naudojamą įrenginį. Jis naudojamas valdyti, kaip tinklalapis atrodo skirtinguose įrenginiuose, pvz., išmaniuosiuose telefonuose ir planšetiniuose kompiuteriuose. Peržiūros srities metažyma gali būti naudojama norint nustatyti tinklalapio plotį, padidinti arba sumažinti jo mastelį ir nurodyti, ar naudotojams leidžiama priartinti ar nutolinti. Jis taip pat gali būti naudojamas nustatant pradinį mastelį, didžiausią mastelį, vartotojo keičiamas ypatybes ir kt.
Kaip padaryti, kad mano svetainė atitiktų mano telefono ekraną
Jei norite, kad svetainė atitiktų telefono ekraną HTML formatu, galite naudoti peržiūros srities metažymą. Ši žyma leidžia valdyti, kaip jūsų svetainė rodoma skirtinguose įrenginiuose. Galite nustatyti, kad peržiūros srities plotis būtų lygus įrenginio pločiui, kad jūsų svetainė automatiškai pakoreguotų jos dydį, kad tilptų bet kurio įrenginio ekrane. Be to, CSS kode taip pat galite naudoti medijos užklausas, kad dar labiau tinkintumėte, kaip jūsų svetainė atrodo skirtinguose įrenginiuose.
