Preview mobile device van pagina tonen

Ongeveer 70% van de bezoekers van umcutrecht.nl en hetwkz.nl zitten op een mobiel device (bijv. smartphone). Omdat het bewerken van pagina's nou eenmaal op een groot scherm plaatsvindt, zien we de preview niet zo snel op een mobiel device. Maar Google Chrome heeft een functie waarmee je een mobiel device kan simuleren in je browser. Volg de onderstaande stappen om je preview pagina te zien zoals deze getoond wordt op een mobiel device.

Preview mobile device weergeven

1. Bekijk de preview pagina in Google Chrome
2. Gebruik de toetsencombinatie ctrl + shift + i (Windows)
   of cmd + option + i (Apple)
   1. Of: open het menu rechtsboven
   2. Kies: Meer hulppgrogramma's
   3. Kies: hulpprogramma's voor ontwikkelaars
3. Je ziet nu een scherm met een gedeelte in code (hier hoef je niks mee te doen) en een gedeelte de preview pagina
4. In de menubalk bovenaan de code staat links van 'elements', 'console', 'sources' en 'network' een icoontje dat lijkt om een smartphone en een tablet. Klik op dit icoon.
5. Boven de preview pagina staat (waarschijnlijk) 'responsive' met daarnaast nog het aantal pixels dat het 'scherm' groot is. Klik op het drop down menu waar 'responsive' in staat.
6. Kies voor het gewenste formaat mobiele telefoon (de kleinste gangbare smartphone is de iphone 5/SE).