Om du är en webbutvecklare eller äger ett onlineföretag kanske du är nyfiken på att veta hur en mobilwebbplats ser ut på en dator. Utseendet och funktionaliteten på din mobilsajt kan vara avgörande eftersom mer än hälften av internettrafiken kommer från telefoner. Kunder är mer benägna att stanna på en webbplats längre eller köpa något om det är visuellt tilltalande. En skrivbordsvy kan också hjälpa dig att göra ändringar och åtgärda eventuella problem tidigare.
Lyckligtvis är detta en relativt okomplicerad process. I den här artikeln visar vi dig hur du visar en mobilversion av en webbplats på olika enheter och webbläsare.
Så här visar du den mobila versionen av en webbplats i Chrome på en Mac
I Chrome kan du testa gränssnittet och se om alla webbplatsens komponenter fungerar korrekt genom att använda ett inbyggt utvecklarverktyg som heter DevTools. Eftersom det ger fördefinierade enhetsval, är DevTools det bästa sättet för utvecklaren att snabbt flytta vyn från skrivbordet till mobilen och vice versa utan några utvecklartillägg.
Du kan också ändra skärmstorleken för att passa dina behov och justera skärmbredden och höjden för att se hur din webbplats kommer att se ut på olika skärmstorlekar. För att göra det på en Mac, följ dessa steg:
- Starta webbläsaren Google Chrome och gå till webbplatsen du vill visa.
- Tryck på F12 på ditt tangentbord för att komma åt DevTools.
- När läget är aktiverat klickar du på ikonen Växla enhetsemulering.
- Du kan välja från en lista med iOS- och Android-enheter för att emulera dem.
- Det kommer att visa webbplatsen i mobilformuläret som du har valt.
När du är klar stänger du bara fönstret för utvecklarverktyg för att stänga den mobila versionen av webbplatsen.
Hur man visar den mobila versionen av en webbplats i Chrome på en Windows-dator
Om du vill se en mobilversion av en webbplats på Windows PC i Chrome, är det en ganska liknande process:
- Öppna webbläsaren Chrome.
- I Chrome går du till webbplatsen du vill se i mobilversionen.
- Högerklicka på webbsidan och välj Inspektera från menyn.
- För att gå till Utvecklarverktyg, klicka på fliken Fler verktyg och välj Utvecklarverktyg eller tryck på F12 för att öppna DevTools.
- Fönstret Utvecklarverktyg öppnas.
- Klicka på enhetsväxlingsikonen för att växla till läget för mobilwebbplatsvisning.
- Välj den mobila enhet du vill emulera (valfritt).
- Du kan nu ändra skärmens mått för att passa dina behov.
Så här visar du den mobila versionen av en webbplats i Chrome på en Chromebook
Att komma åt den mobila versionen av en webbplats i Chrome med en Chromebook är mycket lik de två första metoderna.
- Öppna webbläsaren Google Chrome.
- Öppna webbsidan du vill komma åt på din mobila enhet.
- För att komma åt menyn, klicka på den vertikala ikonen med tre punkter.
- Dra musen över objektet Fler verktyg i listan.
- Välj Utvecklarverktyg.
- Utvecklarverktygsfönstret i webbläsaren öppnas.
- Växla visningsläget för mobilwebbplats genom att klicka på ikonen för enhetsväxling.
Detta kommer att ta upp användargränssnittet för den mobila webbplatsen. Du kan också välja önskad enhetsupplevelse genom att välja märke och modell från rullgardinsmenyn. Webbsidan uppdateras som en skrivbordswebbplats när du stänger konsolen för utvecklarverktyg.
Hur man visar den mobila versionen av en webbplats i Firefox på en Mac
Du kan använda andra webbläsare som Firefox för att visa en mobilwebbplats på en Mac-dator. Ändra storlek på webbläsarfönstret är en av metoderna som de flesta webbutvecklare använder för att utvärdera webbsidan med responsiv design. Men för det mesta kommer detta alternativ inte att verka acceptabelt.
Det är där Firefox-webbläsarens webbutvecklingsfunktioner kommer till användning. Du kan bläddra på dina webbsidor i flera upplösningar om du vet hur du kommer åt mobilversioner av webbplatser i Firefox. Följ dessa steg:
- Öppna mobilversionen av webbplatsen du vill se.
- Högerklicka på webbsidan och välj alternativet Inspektera från menyn.
- Välj Responsive Design Mode.
- Välj skärmstorlek på webbplatsen.
Hur man visar den mobila versionen av en webbplats i Firefox på en Windows-dator
Windows-datorer har också möjlighet att se mobilversioner av webbplatser som använder Firefox. Så här gör du:
- Starta Firefox på din PC.
- Gå till webbplatsen du vill se som mobilversion.
- Gå till Inställningar genom att klicka på den horisontella ikonen med tre streck.
- Du kommer att se en rullgardinsmeny där du måste välja ett alternativ för webbutvecklare.
- Välj Responsivt designläge.
- Slutligen kan du välja en smartphonemodell för att se hur din webbplats kommer att se ut på den enheten.
Hur man visar den mobila versionen av en webbplats i Safari på en Mac
Vi har täckt hur du visar en mobil webbplats på en dator med Chrome och Firefox. Men hur är det med standardwebbläsaren som följer med Mac-enheter, Safari? Lyckligtvis är det möjligt att se en mobilversion av en webbplats i Safari också.
- Starta webbläsaren Safari.
- Gå till webbplatsen du vill se som mobilversion.
- Klicka på Alternativ och sedan på Utveckla-menyn.
- Från rullgardinsmenyn väljer du Ange responsivt designläge.
- Du kan nu se den mobila versionen av webbplatsen.
Ytterligare FAQ
Kan jag se skrivbordsversionen av en webbplats på min telefon?
Svaret är ja! Du kan byta från mobilversionen till stationärversionen för att kolla in den utan att använda en dator. Stegen för att flytta mobilversionen till skrivbordsversionen i Chrome är följande:
1. Gå till webbplatsen du vill se i skrivbordsvy.
2. Klicka på ikonen med tre punkter för att komma åt menyn.
3. Välj alternativet Skrivbordsvy nu.
Tänk på att dessa steg kan variera beroende på vilken telefon du använder.
fly från tarkov spela med vänner
Gör mobil webbdesign enklare
Utvecklarverktygen är utmärkta för att analysera och modifiera en mobilversion av en webbplats på ett skrivbord utan att byta enhet. Du kan ändra skärmstorleken för att se hur komponenterna fungerar på olika enheter. Du kan justera olika komponenter och skapa webbplatsen för flera skärmstorlekar med det responsiva läget.
När du designar en webbplats bör designern alltid ha i åtanke hur fronten av webbplatsen ser ut på telefoner, surfplattor och stationära datorer. Att använda metoderna som beskrivs i artikeln kan också hjälpa utvecklaren att göra det och även att identifiera vilka komponenter på en webbplats som skapar problem för att åtgärda dem.
Har du någonsin provat att visa en mobilversion av en webbplats på ditt skrivbord? Vilken webbläsare föredrar du att använda för att göra det? Låt oss veta i kommentarsfältet nedan.
