Responsiivinen verkkosivun suunnittelu - Näkymä
- Edellinen sivu RWD esittely
- Seuraava sivu RWD ruudukko
Mitä näyttöalue on?
Näyttöalue (viewport) on käyttäjän näkyvä alue verkkosivulla.
Näyttöalue voi vaihdella laitteesta riippuen, ja se voi olla pienempi matkapuhelimella kuin tietokoneen näytöllä.
Ennen tabletteja ja puhelimia sivustot suunniteltiin vain tietokoneiden näyttöihin, ja kiinteästi mittaustuotantoon ja kiinteisiin kokoihin oli yleistä.
Kun aloimme käyttää tabletteja ja puhelimia Internetissä, kiinteästi mitattu sivusto oli liian leveä sopeutumaan näyttöalueeseen. Tämän ongelman ratkaistaksemme selaimet näillä laitteilla supistavat koko sivun suhteellisesti näytön kokoon.
Tämä ei ole täydellistä! Se on vain nopea korjaus.
asettaa näyttöalueen
HTML5 tuotti menetelmän, joka mahdollistaa Web-suunnittelijoiden <meta> tunnisteet näyttöalueen hallintaan kaikissa sivustoissa.
Sinun tulisi sisällyttää kaikki seuraavat <meta> Näyttöalue-elementti:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Se tarjoaa selaimelle ohjeita siitä, miten hallita sivun kokoa ja skaalaa.
width=device-width Osittainen asetus sivun leveydeksi seuratakseen laitteiston näyttöleveyttä (riippuen laitteesta).
Kun selain ladataan sivu ensimmäistä kertaa:initial-scale=1.0 Osittainen asetus alkuperäiseen skaalaukseen.
Alla on esimerkkejä ilman näyttöalueen meta-elementtiä olevista sivustoista sekä näyttöalueen meta-elementillä varustetuista sivustoista:
Vinkki:Jos selaat tätä sivua puhelimella tai tabletilaitteella, voit napsauttaa alla olevia kahta linkkiä nähdäksesi eroavaisuudet.
Säädä sisältö näkymän kokoon
Käyttäjät tottuvat selaamaan sivustoja pystysuuntaan tietokoneilla ja mobiililaitteilla, ei horisontaalisesti!
Jos käyttäjää pakotetaan horisontaaliseen selaamiseen tai sivun pienenemiseen nähdäkseen koko sivun, se voi johtaa huonoon käyttäjäkokemukseen.
On noudatettava joitakin lisäohjeita:
1. Vältä suurten kiinteiden leveyksien käyttö elementtejä varten - Esimerkiksi, jos kuvan leveys on suurempi kuin näkymän leveys, se voi aiheuttaa näkymän horisontaalisen pyörimisen. Varmista, että tämä sisältö mukautetaan näkymän leveyteen.
2. Älä anna sisällön riippua tietystä näkymän leveydestä hyväksyttävän näkymän saavuttamiseksi - Koska näyttöjen koko ja leveys CSS-pikseleissä vaihtelee laitteiden välillä, sisältö ei saisi olla riippuvainen tietystä näkymän leveydestä hyväksyttävän näkymän saavuttamiseksi.
3. Käytä CSS media-kyselyjä erilaisten tyylejä pienille ja suurille näytöille - Asettamalla sivuelementtien suuret CSS-absoluuttiset leveydet voi aiheuttaa, että elementti on liian leveä pienemmille laitteille. Sen sijaan tulisi harkita suhteellisten leveyden arvojen käyttöä, kuten width: 100%. Lisäksi tulisi olla varovainen suurten absoluuttisten sijoitusarvojen käytössä, mikä voi aiheuttaa elementin luiskautumisen pienempien laitteiden näkymän ulkopuolelle.
- Edellinen sivu RWD esittely
- Seuraava sivu RWD ruudukko
