Förhandsgranska webbsidan

När du är i redigeringsläget kan du förhandsgranska sidan i vyerna för dator, surfplatta och mobil. Funktionen finns uppe till höger på sidan.

Förhandsvisningen öppnas i redigeringsläget och är riktgivande. Till exempel fungerar inte mobilförhandsgranskningen helt perfekt i redigeringsvyn. Kontrollera därför alltid den färdiga sidan också i webbläsaren. Du kan se webbsidan i mobil- och surfplatteläge genom att använda webbläsarens verktyg för att kontrollera element.

Granska webbsidor i mobilvy med webbläsarnas verktyg

Allmänt

Mobilvyn kan granskas med webbläsarnas utvecklarverktyg (Inspect / Developer Tools). Med dem kan du se hur sidan ser ut på olika telefoner och surfplattor utan att använda en fysisk enhet.

Google Chrome

1. Öppna sidan i Chrome.
2. Högerklicka på sidan och välj Inspect (eller använd snabbkommandot Ctrl+Shift+I på Windows eller Cmd+Opt+I på Mac). 
3. Utvecklarverktygen öppnas i sidans höger- eller nederkant.
4. Klicka på ikonen Toggle device toolbar (telefon- och surfplattsikonen). Snabbkommando: Ctrl+Shift+M / Cmd+Shift+M.
5. Nu visas sidan i mobilvy.
6. I rullgardinsmenyn uppe kan du välja olika enheter, till exempel iPhone, Galaxy eller iPad, och växla mellan stående och liggande läge.

Microsoft Edge

1. Edge fungerar på samma sätt som Chrome eftersom den bygger på Chromium.
2. Högerklicka och välj Inspect eller använd Ctrl+Shift+I / Cmd+Opt+I. 
3. Klicka på Toggle device emulation. 
4. Välj vilken enhet du vill se sidan på.

Mozilla Firefox

1. Öppna sidan i Firefox.
2. Högerklicka och välj Inspect eller använd Ctrl+Shift+I / Cmd+Opt+I. 
3. Klicka på Responsive Design Mode (telefon + surfplatta). Snabbkommando: Ctrl+Shift+M / Cmd+Opt+M.
4. Nu visas sidan i mobilstorlek. Du kan välja färdiga enheter eller skriva in egna mått.
5. Du kan också simulera olika nätförbindelser (till exempel långsam 3G eller offline).

Safari (Mac)

1. Aktivera först menyn Develop (Preferences → Advanced → kryssa i Show Develop menu in menu bar). 
2. Öppna sidan.
3. Välj Enter Responsive Design Mode i menyn Develop. 
4. Välj en mobil enhet, till exempel en iPhone-modell.

Tips för innehållsproducenter

• Kontrollera alltid sidan på flera enheter. Texter, bilder och menyer kan bete sig olika.
• Testa i både stående och liggande läge.
• Zooma och rulla som på en riktig enhet.
• Använd en riktig telefon eller surfplatta om möjligt – emuleringen är inte alltid identisk med en verklig enhet.