Hur man visar mobilversionen av WordPress-webbplatser från skrivbordet

Att granska mobilversionen av din WordPress-webbplats i en förhandsgranskning på en stationär dator ä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 annars kanske missar.

Under åren har vi arbetat med många webbplatsägare för att säkerställa att deras webbplatser ser bra ut och fungerar bra på mobila enheter. Vi prioriterar också mobilvänliga designer när vi skapar nya sidor och inlägg på WPBeginner-webbplatsen.

En utmaning vi har märkt är att det kan vara knepigt att kontrollera mobilversionen på en dator utan rätt verktyg.

Lyckligtvis gör WordPress Theme Customizer och Google Chrome DevTools Device Mode det möjligt att snabbt förhandsgranska och göra justeringar.

I den här guiden går vi igenom båda metoderna för att visa mobilversionen av WordPress-webbplatser från datorn.

Varför du bör förhandsgranska din mobilanpassade layout

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

Detta 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 mobil-först-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, behöver du fortfarande kontrollera hur din webbplats ser ut på mobilen. Du kanske vill skapa olika versioner av viktiga landningssidor som är optimerade för mobilanvändares behov.

Det är viktigt att komma ihåg att de flesta mobilförhandsgranskningar inte kommer att vara helt perfekta eftersom det finns så många olika mobilskärmstorlekar och webbläsare. Din slutliga testning bör alltid vara att titta på din webbplats på en mobil enhet.

I följande avsnitt kommer vi att titta på hur du kan visa mobilversionen av din WordPress-webbplats på en stationär dator.

Vi kommer att täcka 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 valfri sektion:

• Metod 1: Använda WordPress temaanpassare
• Metod 2: Använda Google Chromes DevTools enhetsläge
• Bonustips: Skapa mobilanpassat innehåll i WordPress
• Videohandledning
• Vanliga frågor

Låt oss börja!

Metod 1: Använda WordPress temaanpassare

Du kan använda WordPress temaanpassare för att förhandsgranska mobilversionen av din WordPress-webbplats.

Logga helt enkelt in på din WordPress-instrumentpanel och gå till skärmen Utseende » Anpassa.

Detta öppnar WordPress temaanpassare.

Beroende på vilket tema du använder kan du se något annorlunda alternativ i menyn till vänster.

Längst ner på skärmen klickar du helt enkelt på mobilikonen.

Du kommer då att se en förhandsgranskning av hur din webbplats 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 avslutat skapandet av din blogg eller när den är i underhållsläge.

Du kan nu göra ändringar på din webbplats och se hur de ser ut innan du publicerar dem.

Metod 2: Använda Google Chromes DevTools enhetsläge

Nästa metod för hur du visar mobilversionen av webbplatsen är att använda webbläsaren Google Chrome.

Google Chrome-webbläsaren har en uppsättning utvecklarverktyg som låter dig köra olika kontroller på vilken webbplats som helst, inklusive att förhandsgranska hur den ser ut på mobila enheter.

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

Därefter behöver du högerklicka på sidan och välja alternativet 'Inspektera'.

En ny panel öppnas på höger sida eller längst ner på skärmen.

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

I utvecklarvyn kommer du att kunna se din webbplats HTML-källkod, CSS och andra detaljer.

Klicka sedan på knappen 'Växla enhetsverktygsfält' för att byta till mobilvyn.

Du kommer att se förhandsgranskningen av din webbplats krympa till mobilskärmens storlek.

Din webbplats allmänna utseende kommer också att ändras i mobilvyn. Till exempel kommer menyerna att kollapsa, och ytterligare ikoner kommer att flyttas till vänster istället för till höger om menyn.

När du för muspekaren över mobilvyn av din webbplats blir den en cirkel. Du kan flytta denna cirkel med musen för att efterlikna pekskärmen på en mobil enhet.

Du kan också hålla nere 'Shift'-tangenten, sedan klicka och flytta musen för att simulera att nypa mobilskärmen för att zooma in eller ut.

Ovanför mobilvyn av din webbplats ser du ytterligare alternativ.

Dessa inställningar låter dig göra flera extra saker. Du kan kontrollera hur din webbplats skulle se ut på olika typer av smartphones.

Till exempel kan du välja en mobil enhet som en iPhone och se hur din webbplats visas på den.

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

Bonustips: Skapa mobilanpassat innehåll i WordPress

Det är viktigt att din webbplats har en responsiv design så att mobilbesökare enkelt kan navigera på din webbplats.

Att bara ha en responsiv webbplats kanske dock inte räcker. Användare på mobila enheter letar ofta efter andra saker än datoranvändare.

Många premiumteman och plugins låter dig skapa element som visas olika på datorer jämfört med mobiler. Du kan också använda ett sidbyggarplugin som SeedProd för att redigera dina landningssidor i mobilvy.

Du bör överväga att skapa mobilanpassat innehåll för dina formulär för leadsgenerering. På mobila enheter bör dessa formulär endast be om minimal information, helst bara en e-postadress. De bör också se bra ut och vara lätta att stänga.

För mer information kan du se vår guide om hur man skapar en landningssida i WordPress.

Ett annat bra sätt att skapa mobilanpassade popups och formulär för leadgenerering är med OptinMonster. Det är det mest kraftfulla WordPress-pluginet för popups och verktyget för leadgenerering på marknaden.

OptinMonster har specifika visningsregler för enhetsinriktning som gör att du kan visa olika kampanjer för mobilanvändare kontra datoranvändare. Du kan kombinera detta med OptinMonsters geo-inriktningsfunktion och andra avancerade personaliseringsfunktioner för att få bästa konverteringar.

Du kan se vår guide om hur man skapar mobila popups som konverterar för mer information.

Videohandledning

Innan du går kan du vilja kolla in vår videoguide om hur du visar mobilversionen av WordPress-webbplatser från datorn.

Prenumerera på WPBeginner

Vanliga frågor

Här är några frågor som våra läsare ofta ställer om förhandsgranskning av webbplatsens mobilvy.

Kommer dessa skrivbordsförhandsvisningar att matcha riktiga mobila enheter exakt?

Inte alltid. Även om de är användbara för att upptäcka uppenbara layoutproblem, kan dessa datorbaserade verktyg bara emulera skärmdimensioner, webbläsarbeteende och nätverksförhållanden.

De kanske inte fångar prestandaproblem eller hårdvaruspecifika interaktioner som beröringsgester.

Det är därför vi föreslår att du alltid testar på faktiska enheter, inklusive telefoner och surfplattor, för att bekräfta användbarhet i verkliga världen innan du går live.

Kan jag redigera min webbplats i mobilvy från min dator?

Ja, WordPress låter dig redigera innehåll samtidigt som du förhandsgranskar mobiläge i Anpassaren eller använder sidbyggare som Elementor, SeedProd och Beaver Builder.

När du växlar till mobilförhandsgranskning kan du:

• Justera marginaler, stoppning och teckensnittsstorlekar för mindre skärmar.
• Dölj eller visa vissa element endast på mobilen (som stora bilder eller banners endast för datorer).
• Testa menyer och widgets utformade för pekinteraktioner.

De flesta byggare erbjuder enhetspecifika inställningar, så du kan anpassa layouter utan att påverka dator- eller surfplattavyer.

Hur kan jag kontrollera min WordPress mobilvy utan att logga in?

Om du vill se hur den live webbplatsen ser ut för besökare, prova dessa metoder:

• Öppna din webbplats i ett inkognitofönster och använd utvecklarverktygens enhetsläge.
• Använd online-verktyg för responsiv designkontroll som Responsive Design Checker.

Dessa verktyg låter dig visa din webbplats vid olika upplösningar utan att kräva inloggningsuppgifter.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du förhandsgranskar webbplatsens mobilanpassade layout. Du kanske också vill se våra experters val för de bästa plugins för att konvertera en WordPress-webbplats till en mobilapp och lära dig sätt att skapa en mobilvänlig webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.