Verkkosivun esikatselu

Kun olet sivun muokkaustilassa, voit esikatsella sivua työpöytä-, tabletti- ja mobiilinäkymässä. Toiminto löytyy sivun oikeasta yläkulmasta.

Näkymä avautuu sivun muokkaustilassa. Tämä näkymä on suuntaa antava. Esimerkiksi mobiiliesikatselu ei toimi julkaisuvälineessä täydellisesti. Esikatsele aina valmista sivua myös selaimessa. Voit katsoa verkkosivua mobiili- ja tablettinäkymässä käyttäen avuksi selainten Tarkista-toimintoa.

Verkkosivujen tarkastelu mobiilinäkymässä eri selainten Tarkista -toiminnolla

Yleistä

Verkkosivujen mobiilinäkymän tarkastelu onnistuu selainten kehittäjätyökalujen (Inspect / Developer Tools) avulla. Niiden avulla voi nähdä, miltä sivu näyttää eri puhelimilla ja tableteilla ilman erillistä fyysistä laitetta.

Google Chrome

1. Avaa tarkasteltava sivu Chromessa.
2. Klikkaa hiiren oikealla sivun päältä ja valitse Tarkista (tai käytä pikanäppäintä Ctrl+Shift+I Windowsilla tai Cmd+Opt+I Macilla).
3. Kehittäjätyökalut aukeavat selaimen oikeaan tai alalaitaan.
4. Yläpalkista klikkaa Toggle device toolbar -painiketta (puhelin ja tabletti -ikoni). Pikanäppäin: Ctrl+Shift+M / Cmd+Shift+M.
5. Nyt sivu näkyy mobiililaitteen näkymässä.
6. Yläpalkin pudotusvalikosta voit valita eri laitteita (esim. iPhone, Galaxy, iPad) ja käännellä näkymää pysty- ja vaakasuuntaan.

Microsoft Edge

1. Toimi kuten Chromessa (Edge käyttää samaa Chromium-pohjaa).
2. Avaa Tarkista hiiren oikealla painikkeella tai pikanäppäimellä Ctrl+Shift+I / Cmd+Opt+I.
3. Klikkaa Toggle device emulation -kuvaketta.
4. Valitse haluamasi laite ja tarkastele sivua mobiilissa.

Mozilla Firefox

1. Avaa sivu Firefoxissa.
2. Klikkaa hiiren oikealla ja valitse Tarkastele tai käytä Ctrl+Shift+I / Cmd+Opt+I.
3. Kehittäjätyökalujen yläpalkista klikkaa Responsive Design Mode (puhelin + tabletti -ikoni). Pikanäppäin: Ctrl+Shift+M / Cmd+Opt+M.
4. Näet sivun mobiilikoossa. Yläpalkista voi valita valmiita laitteita tai syöttää omat leveys- ja korkeusmitat.
5. Voit myös simuloida erilaisia verkkoyhteyksiä (hidas 3G, offline jne.).

Safari (Mac)

1. Mene Safari-asetuksiin ja ota käyttöön Develop-valikko (Preferences → Advanced → ruksaa “Show Develop menu in menu bar”).
2. Avaa tarkasteltava sivu.
3. Yläpalkin Develop-valikosta valitse Enter Responsive Design Mode.
4. Valitse mobiililaite, esim. iPhone-malli.

Vinkit sisällöntuottajalle

• Tarkista aina useampi laite: Tekstit, kuvat ja valikot voivat käyttäytyä eri tavoin.
• Testaa eri näytön suunnat: pysty ja vaaka.
• Zoomaa ja selaa kuten oikealla laitteella.
• Käytä oikeaa puhelinta/tablettia, jos mahdollista – emulointi ei ole aina täysin identtinen todellisen laitteen kanssa.