Yksi tärkeimmistä käsitteistä missä tahansa reagoivassa suunnittelussa on katselukokoon muuttaminen. Tämä johtuu siitä, että mobiilinäkymät vaihtelevat suuresti työpöydän näkymissä. Jos haluat hallita näkymän kokoa, käytämme perinteisesti näkymän sisällönkuvauskenttää.
Kuitenkin katselukanavan sisällönkuvauskenttä, kuten viimeisen ikuisen ikäisimmän selainkehitys, ei ole W3C: n kelvollinen. Apple alun perin esitteli Safarissa ja on sittemmin hyväksynyt muut selaimet. Tämä johtaa epäjohdonmukaiseen täytäntöönpanoon.
Onneksi W3C on jälleen kerran mentänyt pelastamalla ottamalla käyttöön @viewport CSS-säännön.
Käyttämällä vanhaa metakoodeja koskevaa lähestymistapaa tällä tavalla kerromme selaimelle, mihin kokoon katsoruutu pitäisi nähdä:
Melkoisesti, koska se ei ole kelvollinen, katselukäsikirja ei ole data, vaan sen esitystapa. Joten kiinni tietojen ja esitystapojen periaatteista, näkymäopastuksen on oltava CSS: ssä, ei HTML: ssä.
CSS: n W3C-ratkaisu näyttää tältä:
@viewport {width: device-width;}Vaihtoehtoisesti voit asettaa näkymän numerolla, kuten:
@viewport {width: 640px;}Voit käyttää @viewport-sääntöä yhdessä @media-kyselyiden kanssa, jotta jokin 960-näkymä suurempi katselukerros voidaan kutistaa 960px: iin seuraavasti:
@media screen and (min-width: 960px){@viewport {width: 960px;}}@Viewport-sääntö mahdollistaa myös zoomauksen sivulle oletusarvoisesti ja jopa suurimman zoomauksen asettamisen:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}On mahdollista estää zoomaaminen kokonaan asettamalla käyttäjän zoom-ominaisuus kiinteään. Kuitenkin zoomaus, etenkin älypuhelimissa, on välttämätöntä esteettömyydelle ja suosittelen käyttämään tätä ominaisuutta.
Yksi erittäin hyödyllinen ominaisuus antaa meille mahdollisuuden lukita web-sivusi maisema- tai pystyasentoon:
@viewport {orientation: landscape;}Tässä on huono uutinen: nykyään tämä sääntö tukee vain Internet Explorer 10 ja Opera ja vaatii vastaavasti -ms- ja -oblussin etuliitteet.
Vaikka tämä on pettymys sanoa vähäisimpänä, se, että näkymätoiminnot ovat jo käytettävissä useimmissa selaimissa, pitäisi tarkoittaa, että tämä on yksinkertainen sääntö poimia. Toivottavasti näemme, että se on otettu käyttöön yöelämässä hyvin pian.
Huolehditko standardien noudattamisesta? Ovatko W3C auttavat tai estävät etenemistä verkossa? Kerro meille kommentit.
Esitetty kuva / pikkukuva, ikkunan kuva kautta LostBob Photos