Så här viewar du mobilversionen av WordPress webbplatser från skrivbordet

Att granska mobilversionen av din WordPress-webbplats i en förhandsgranskning på datorn är en enkel men viktig uppgift. Det låter dig kontrollera hur din webbplats ser ut på mindre skärmar, vilket hjälper dig att upptäcka layoutproblem eller designfel som du kanske missar annars.

Genom åren har vi arbetat med många webbplatsägare för att se till att deras webbplatser ser bra ut och fungerar bra på mobila enheter. Vi prioriterar också mobilvänlig design när vi skapar nya sidor och inlägg på WPBeginners webbplats.

En utmaning som vi har märkt är att det kan vara svårt att kontrollera mobilversionen på en dator utan rätt verktyg. Utan ett enkelt förhandsgranskningsalternativ kan det sluta med att du gör ändringar utan att veta hur de påverkar mobilanvändare.

Lyckligtvis kan du snabbt förhandsgranska och göra justeringar med WordPress Theme Customizer och Google Chromes DevTools Device Mode. I den här guiden kommer vi att gå igenom båda metoderna för att visa mobilversionen av WordPress-webbplatser från skrivbordet.

Varför du bör Preview din mobila layout

Mer än 50% av dina webbplatsbesökare kommer att besöka din webbplats via sina mobiltelefoner, och cirka 3% kommer att använda en surfplatta.

Det innebär att det är mycket viktigt att ha en webbplats som ser bra ut på mobilen.

Faktum är att mobilen är så viktig att Google nu använder ett mobile-first-index för sin algoritm för webbplatsrankning. Detta innebär att Google kommer att använda din webbplats mobilversion för indexering. Du kan lära dig mer genom att läsa vår ultimata guide till WordPress SEO.

Även om du använder ett responsivt WordPress-tema måste du ändå kontrollera hur din webbplats ser ut på mobilen. Du kanske vill skapa olika versioner av viktiga landningssidor som är optimerade för mobilanvändarnas behov.

Det är viktigt att komma ihåg att de flesta mobila förhandsvisningar inte kommer att vara helt perfekta eftersom det finns så många olika mobila skärmstorlekar och webbläsare. Ditt slutliga test bör alltid vara att titta på din webbplats på en mobil enhet.

I de följande avsnitten går vi igenom hur du kan visa mobilversionen av din WordPress-webbplats på en stationär dator.

Vi kommer att gå igenom 2 olika metoder för att testa hur din webbplats ser ut på mobilen med hjälp av stationära webbläsare. Du kan klicka på länkarna nedan för att hoppa till valfritt avsnitt:

Låt oss komma igång!

Metod 1: Använda WordPress’s Theme Customize

Du kan använda WordPress theme customize för att previewa den mobila versionen av din WordPress site.

Logga bara in på din WordPress dashboard och gå till vyn Appearance ” Customize.

Detta kommer att öppna WordPress temaanpassare.

Beroende på vilket theme du använder kan det hända att du ser lite olika alternativ i menyn till vänster.

Längst ner på vyn klickar du bara på den mobila ikonen.

Du kommer då att se en preview av hur din site ser ut på mobila enheter.

Den här metoden för att förhandsgranska mobilversionen är särskilt användbar när du inte har skapat din blogg färdigt eller när den är i underhållsläge.

Du kan nu göra ändringar på din website och kontrollera hur de ser ut innan du skickar dem live.

Metod 2: Använda DevTools Device Mode i Google Chrome

Nästa metod för att visa den mobila versionen av webbplatsen är att använda webbläsaren Google Chrome.

Webbläsaren Google Chrome har en uppsättning utvecklarverktyg som gör att du kan göra olika kontroller av en webbplats, inklusive förhandsgranskning av hur den ser ut på mobila enheter.

Öppna helt enkelt webbläsaren Google Chrome på skrivbordet och besök den sida du vill kontrollera. Det kan vara en förhandsgranskning av en sida på din webbplats eller till och med din konkurrents webbplats.

Därefter måste du högerklicka på sidan och välja alternativet “Inspektera”.

En new panel öppnas på höger sida eller längst ner på vyn.

Det kommer att se ut ungefär så här:

I vyn för utvecklare kan du se webbplatsens HTML-källkod, CSS och andra detaljer.

Därefter måste du klicka på knappen “Toggle Device Toolbar” för att byta till mobil view.

You will see the preview of your website shrink to the mobile screen size.

Din websites allmänna appearance kommer också att förändras i den mobila viewen. Exempelvis minimeras menyerna och ytterligare icons flyttas till vänster i stället för till höger i menyn.

När du håller muspekaren över den mobila vyn av din webbplats blir det en cirkel. Du kan flytta den här cirkeln med musen för att efterlikna pekskärmen på en mobil enhet.

You can also hold down the ‘Shift’ key, then click and move your mouse to simulate pinching the mobile screen to zoom in or out.

Ovanför den mobila viewen av din site kommer du att se några ytterligare alternativ.

Med dessa Settings kan du göra flera extra saker. You can check how your site would look on different types of smartphones.

Du kan t.ex. välja en mobil enhet som en iPhone och se hur din webbplats visas på den.

Du kan också simulera hur din webbplats fungerar på snabba eller långsamma 3G-anslutningar. Med hjälp av rotationsikonen kan du rotera mobilskärmen.

Bonus Tips: Skapa mobilspecifikt innehåll i WordPress

Det är viktigt att din website har en responsiv design så att mobila besökare enkelt kan navigera på din website.

Men det kanske inte räcker med att bara ha en responsiv webbplats. Användare av mobila enheter letar ofta efter andra saker än användare av stationära datorer.

Många premiumteman och tillägg låter dig skapa element som visas på olika sätt på datorn jämfört med mobilen. Du kan också använda ett page builder-plugin som SeedProd för att editera dina landing pages i mobil view.

You should consider creating mobile-specific content for your lead generation forms. På mobila enheter bör dessa formulär be om minimalistisk information, helst bara en email address. De ska också se bra ut och vara lätta att stänga.

För mer details, you can see our guide on how to create a landing page in WordPress.

Ett annat bra sätt att skapa mobilspecifika popup- och leadgenereringsformulär är med OptinMonster. Det är det mest kraftfulla WordPress popup-pluginet och leadgenereringsverktyget på marknaden.

OptinMonster har specifika visningsregler för enhetsinriktning som gör att du kan visa olika kampanjer för mobilanvändare jämfört med stationära användare. Du kan kombinera detta med OptinMonsters geo-targeting-funktion och andra avancerade personaliseringsfunktioner för att få de bästa konverteringarna.

Du kan läsa vår guide om hur du skapar mobila popups som konverterar om du vill ha mer information.

Video Tutorial

Innan du går, kanske du vill kolla in vår videohandledning om hur du visar mobilversionen av WordPress-webbplatser från skrivbordet.

Subscribe to WPBeginner

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du förhandsgranskar den mobila layouten på din webbplats. Du kanske också vill se våra expertval för de bästa pluginsen för att konvertera en WordPress-webbplats till en mobilapp och lära dig hur du skapar en mobilvänlig webbplats.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.