Hvis du er en nettutvikler eller eier en nettbasert bedrift, kan du være nysgjerrig på hvordan et mobilnettsted ser ut på en datamaskin. Utseendet og funksjonaliteten til mobilsiden din kan være avgjørende siden mer enn halvparten av Internett-trafikken kommer fra telefoner. Det er mer sannsynlig at kunder blir på et nettsted lenger eller kjøper noe hvis det er visuelt tiltalende. En skrivebordsvisning kan også hjelpe deg med å gjøre endringer og fikse mulige problemer tidligere.
Heldigvis er dette en relativt enkel prosess. I denne artikkelen viser vi deg hvordan du kan se en mobilversjon av et nettsted på forskjellige enheter og nettlesere.
Slik viser du mobilversjonen av et nettsted i Chrome på en Mac
I Chrome kan du teste grensesnittet og se om alle komponentene til nettstedet fungerer som de skal ved å bruke et innebygd utviklerverktøy kalt DevTools. Fordi det gir forhåndsdefinerte enhetsvalg, er DevTools den beste måten for utvikleren å raskt skifte visningen fra skrivebord til mobil og omvendt uten noen utviklerutvidelser.
Du kan også endre skjermstørrelsen for å passe dine behov og justere skjermbredden og høyden for å se hvordan nettstedet ditt vil se ut på forskjellige skjermstørrelser. For å gjøre det på en Mac, følg disse trinnene:
- Start Google Chrome-nettleseren og gå til nettstedet du vil se.
- Trykk F12 på tastaturet for å få tilgang til DevTools.
- Når modusen er slått på, klikker du på ikonet Toggle Device Emulation.
- Du kan velge fra en liste over iOS- og Android-enheter for å etterligne dem.
- Den vil vise nettstedet i mobilskjemaet du har valgt.
Når du er ferdig, lukker du bare utviklerverktøyvinduet for å lukke mobilversjonen av nettstedet.
Slik viser du mobilversjonen av et nettsted i Chrome på en Windows-PC
Hvis du vil se en mobilversjon av et nettsted på Windows-PC i Chrome, er det en ganske lignende prosess:
- Åpne Chrome-nettleseren.
- I Chrome går du til nettstedet du ønsker å se i mobilversjonen.
- Høyreklikk på nettsiden og velg Inspiser fra menyen.
- For å gå til Utviklerverktøy, klikk på fanen Flere verktøy og velg Utviklerverktøy eller trykk F12 for å åpne DevTools.
- Vinduet Utviklerverktøy åpnes.
- Klikk på Device Toggle-ikonet for å bytte til Mobile Site View Mode.
- Velg mobilenheten du vil etterligne (valgfritt).
- Du kan nå endre skjermens dimensjoner for å passe dine behov.
Slik viser du mobilversjonen av et nettsted i Chrome på en Chromebook
Å få tilgang til mobilversjonen av et nettsted i Chrome ved hjelp av en Chromebook ligner veldig på de to første metodene.
- Åpne nettleseren Google Chrome.
- Åpne nettsiden du vil ha tilgang til på mobilenheten din.
- For å få tilgang til menyen, klikk på det vertikale ikonet med tre prikker.
- Dra musen over elementet Flere verktøy i listen.
- Velg Utviklerverktøy.
- Vinduet Utviklerverktøy i nettleseren åpnes.
- Bytt mobilsidevisningsmodus ved å klikke på ikonet for enhetsveksling.
Dette vil få opp brukergrensesnittet for mobilsiden. Du kan også velge den foretrukne enhetsopplevelsen ved å velge merke og modell fra rullegardinboksen. Nettsiden vil oppdateres som et skrivebordsnettsted hver gang du lukker konsollen for utviklerverktøy.
Hvordan se mobilversjonen av et nettsted i Firefox på en Mac
Du kan bruke andre nettlesere som Firefox for å vise et mobilnettsted på en Mac-stasjonær. Endre størrelse på nettleservinduet er en av metodene de fleste nettutviklere bruker for å evaluere nettsiden med responsiv design. Imidlertid vil dette alternativet som oftest ikke fremstå som akseptabelt.
Det er her Firefox-nettleserens nettutviklingsmuligheter kommer til nytte. Du kan bla gjennom nettsidene dine i flere oppløsninger hvis du vet hvordan du får tilgang til mobilversjoner av nettsteder i Firefox. Følg disse trinnene:
- Åpne mobilversjonen av nettstedet du ønsker å se.
- Høyreklikk på nettsiden og velg Inspiser fra menyen.
- Velg responsiv designmodus.
- Velg skjermstørrelsen på nettstedet.
Hvordan se mobilversjonen av et nettsted i Firefox på en Windows-PC
Windows-PCer har også muligheten til å se mobilversjoner av nettsteder som bruker Firefox. Slik gjør du det:
- Start Firefox på PC-en.
- Gå til nettsiden du vil se som mobilversjon.
- Gå til Innstillinger ved å klikke på det horisontale ikonet med tre streker.
- Du vil se en rullegardinmeny der du må velge et webutvikleralternativ.
- Velg Responsiv designmodus.
- Til slutt kan du velge en smarttelefonmodell for å se hvordan nettstedet ditt vil se ut på den enheten.
Hvordan se mobilversjonen av et nettsted i Safari på en Mac
Vi har dekket hvordan du viser et mobilnettsted på en datamaskin ved hjelp av Chrome og Firefox. Men hva med standardnettleseren som følger med Mac-enheter, Safari? Heldigvis er det mulig å se en mobilversjon av et nettsted i Safari også.
- Start nettleseren Safari.
- Gå til nettstedet du vil se som mobilversjon.
- Klikk på Alternativer og deretter på Utvikle-menyen.
- Fra rullegardinmenyen velger du Gå inn i responsiv designmodus.
- Du kan nå se mobilversjonen av nettstedet.
Ytterligere vanlige spørsmål
Kan jeg se skrivebordsversjonen av et nettsted på telefonen min?
Svaret er ja! Du kan bytte fra mobilversjonen til desktopversjonen for å sjekke det ut uten å bruke en datamaskin. Trinnene for å skifte mobilversjonen til skrivebordsversjonen i Chrome er som følger:
1. Gå til nettstedet du vil se i skrivebordsvisning.
2. Trykk på ikonet med tre prikker for å få tilgang til menyen.
3. Velg alternativet Skrivebordsvisning nå.
Husk at disse trinnene kan variere avhengig av telefonen du bruker.
flere Google Drive-kontoer på en datamaskin
Gjør mobilnettdesign enklere
Utviklerverktøyene er flotte for å analysere og endre en mobilversjon av et nettsted på en stasjonær datamaskin uten å bytte enhet. Du kan endre skjermstørrelsen for å se hvordan komponentene fungerer på ulike enheter. Du kan justere forskjellige komponenter og lage nettsiden for flere skjermstørrelser ved å bruke responsmodusen.
Når du designer et nettsted, bør designeren alltid huske på hvordan frontenden av nettstedet vises på telefoner, nettbrett og stasjonære datamaskiner. Å bruke metodene beskrevet i artikkelen kan også hjelpe utvikleren til å gjøre det, og også å identifisere hvilke komponenter på et nettsted som skaper problemer for å fikse dem.
Har du noen gang prøvd å se en mobilversjon av et nettsted på skrivebordet ditt? Hvilken nettleser foretrekker du å bruke for å gjøre det? Gi oss beskjed i kommentarfeltet nedenfor.
