Suurin ongelma, joka liittyy HTML-näkymän vaihtamiseen älypuhelimen kokoon, on, että se voi aiheuttaa verkkosivuston lakkaamisen tai näkymisen virheellisesti. Tämä johtuu siitä, että kun katseluporttia muutetaan, verkkosivustoa ei ehkä ole optimoitu pienempään näyttökokoon, eikä sen sisältöä välttämättä voida pienentää kunnolla. Lisäksi jotkin ominaisuudet, kuten navigointivalikot tai interaktiiviset elementit, eivät välttämättä toimi oikein pienemmällä näytöllä.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Tämä koodirivi on sisällönkuvauskenttä, joka antaa selaimelle tietoa HTML-asiakirjasta.
2. Name-attribuutiksi on asetettu "viewport", joka kertoo selaimelle, että tämä tagi sisältää tietoa siitä, miten sivu tulee näyttää eri laitteilla.
3. Content-attribuutiksi asetetaan "width=device-width, original-scale=1.0", mikä kertoo selaimelle, että sen tulee käyttää laitteen leveyttä sivun leveyteenä ja skaalata sitä tarvittaessa ylöspäin tai alaspäin.
Vastuullinen web-suunnittelu
Responsiivinen web-suunnittelu on lähestymistapa verkkosuunnitteluun, joka saa verkkosivut näyttämään hyvin erilaisissa laitteissa ja ikkuna- tai näyttökoossa. Se käyttää yhdistelmää joustavia ruudukoita ja asetteluja, kuvia ja älykästä CSS-mediakyselyjen käyttöä. Responsiiviset verkkosivustot on suunniteltu tarjoamaan optimaalinen katselukokemus – helppo luku ja navigointi minimaalisella koon muuttamisella, panorointilla ja vierityksellä – useilla eri laitteilla (pöytätietokoneiden näytöistä matkapuhelimiin).
HTML:ssä responsiivinen suunnittelu voidaan saavuttaa käyttämällä seuraavia tekniikoita:
• Joustavat ruudukot – Käyttämällä suhteellisia yksiköitä, kuten prosenttiosuuksia tai ems, asetteluelementeissä kiinteän leveyden yksiköiden, kuten pikselien, sijasta, sivu voidaan mukauttaa joustavasti eri näyttökokoihin.
• Mediakyselyt – CSS3-mediakyselyjen avulla kehittäjät voivat määrittää eri tyylejä eri laitteille. Tämä mahdollistaa sivun asettelun mukauttamisen käytettävän laitteen mukaan.
• Responsiiviset kuvat – Kuvista voidaan tehdä responsiivisia käyttämällä HTML5:n srcset-attribuuttia, jonka avulla kehittäjät voivat määrittää kuvasta useita versioita eri resoluutioilla eri laitteille.
• Joustavat videot – Videoista voidaan myös tehdä responsiivisia käyttämällä CSS:n Object-fit-ominaisuutta, jonka avulla kehittäjät voivat määrittää, kuinka videoiden tulee skaalata säilöissään niiden koosta riippuen.
Näkymän sisällönkuvauskenttä
Viewport-sisällönkuvauskenttä on HTML-elementti, joka kertoo selaimelle, kuinka sivun mitat ja skaalaus voidaan säätää käytettävän laitteen mukaan. Sitä käytetään ohjaamaan, miltä verkkosivu näyttää eri laitteissa, kuten älypuhelimissa ja tableteissa. Näkymän sisällönkuvauskentän avulla voidaan määrittää verkkosivun leveys, skaalata sitä ylös tai alas ja määrittää, saavatko käyttäjät lähentää tai loitontaa. Sitä voidaan käyttää myös määrittämään alkumittakaava, maksimimittakaava, käyttäjän skaalattavia ominaisuuksia ja paljon muuta.
Kuinka saan verkkosivustoni sopivaksi puhelimeni näytölle
Jos haluat saada verkkosivuston sopimaan puhelimen näytölle HTML-muodossa, voit käyttää näkymän sisällönkuvauskenttää. Tämän tagin avulla voit hallita sitä, miten verkkosivustosi näytetään eri laitteilla. Voit määrittää näkymän leveyden vastaamaan laitteen leveyttä, jotta verkkosivustosi säätää kokoaan automaattisesti minkä tahansa laitteen näytölle sopivaksi. Lisäksi voit myös käyttää mediakyselyitä CSS-koodissasi muokataksesi verkkosivustosi ulkoasua eri laitteilla.
