Hvordan se nettsteder i mobilversjon

mobilversjonssider på din PC

Hvis du er nettutvikler eller eier en nettbasert bedrift, er du kanskje 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 internettrafikken kommer fra telefoner. Det er mer sannsynlig at kunder blir på et nettsted lenger eller kjøper noe hvis det er visuelt tiltalende. Å se mobilnettsteder på PC-en din kan også hjelpe deg med å gjøre endringer og feilsøke eventuelle problemer.

Heldigvis er dette en relativt enkel prosess. I denne artikkelen vil vi vise deg hvordan du viser smarttelefonmodus med PC-nettleser på forskjellige enheter og nettlesere.

Slik viser du mobilversjonen av et nettsted i Chrome på Mac

I Chrome kan du teste grensesnittet og se om alle nettstedkomponenter fungerer som de skal ved å bruke en integrert utviklingsverktøy kalt DevTools. Siden det gir forhåndsdefinerte enhetsvalg, er DevTools den beste måten for utvikleren å raskt flytte visningen fra skrivebordet til mobilen og tilbake uten noen utviklerutvidelse.

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å skjermer med forskjellige størrelser. For å gjøre dette på en Mac, følg disse trinnene:

  1. Start Google Chrome-nettleseren og gå til nettstedet du vil se.
  2. Trykk F12 på tastaturet for å gå inn i DevTools.
  3. Når modusen er aktiv, klikk på “Aktiver / Deaktiver enhetsemulering”-ikonet.
  4. Du kan velge fra en liste over iOS- og Android-enheter for å etterligne dem.
  5. Den vil vise nettstedet i mobilmodulen du velger.

Når du er ferdig, lukker du 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å en Windows-PC i Chrome, er det en ganske lik prosess:

  1. Åpne Chrome-nettleseren.
  2. I Chrome går du til nettstedet du vil se i mobilversjonen.
  3. Høyreklikk på nettsiden og velg “Inspiser” fra menyen.
  4. For å få tilgang til Utviklerverktøy, klikk på “Flere verktøy”-fanen og velg “Utviklerverktøy” eller trykk F12 for å åpne DevTools.
  5. Vinduet Utviklerverktøy åpnes.
  6. Klikk på ikonet Slå enhet for å bytte til visningsmodus for mobilnettsted.
  7. Velg mobilenheten du vil etterligne (valgfritt).
  8. Nå kan du endre skjermstørrelsen i henhold til 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.

  1. Åpne nettleseren Google Chrome.
  2. Åpne nettsiden du vil ha tilgang til på mobilenheten din.
  3. For å få tilgang til menyen, klikk på ikonet med tre vertikale prikker.
  4. Dra musen over Andre verktøy-elementet i listen.
  5. Velg “Utviklerverktøy”.
  6. Vinduet for utviklerverktøy åpnes i nettleseren din.
  7. Slå visningsmodus for mobilnettsted på eller av ved å klikke på enhetsvekslingsikonet.

Brukergrensesnittet for mobilsiden vil vises. Du kan også velge din foretrukne enhetsopplevelse ved å velge merke og modell fra rullegardinlisten. Nettsiden vil oppdateres som et skrivebordsnettsted hver gang du lukker konsollen for utviklerverktøy.

Slik viser du 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 som brukes av de fleste nettutviklere for å evaluere nettsted med responsiv design. Men mesteparten av tiden vil dette alternativet ikke virke akseptabelt.

Det er her nettutviklingsfunksjonene til Firefox-nettleseren 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 instruksjonene:

  1. Åpne mobilversjonen av nettstedet du vil se.
  2. Høyreklikk på nettsiden og velg “Inspiser” fra menyen.
  3. Velg “Responsiv designmodus”.
  4. Velg nettstedets skjermstørrelse.

Slik viser du 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:

  1. Start Firefox på din PC.
  2. Gå til nettsiden du vil se som mobilversjon.
  3. Gå til “Innstillinger” ved å klikke på de tre horisontale strekene.
  4. Du vil se en rullegardinmeny der du må velge et “Webutvikler”-alternativ.
  5. Velg “Responsiv designmodus”.
  6. Til slutt kan du velge en smarttelefonmodell for å se hvordan nettstedet ditt vil se ut på den enheten.

Slik viser du mobilversjonen av et nettsted i Safari på en Mac

Vi har forklart hvordan du kan se et mobilnettsted på en datamaskin ved hjelp av Chrome og Firefox. Men hva med standardnettleseren som følger med Mac-enheter, Safari? Heldigvis kan du også se en mobilversjon av en nettside i Safari her.

  1. Start nettleseren Safari.
  2. Gå til nettstedet du vil se som mobilversjon.
  3. Klikk på “Alternativer” og deretter på “Utvikling”-menyen.
  4. Fra rullegardinmenyen velger du “Enter Responsive Design Mode”.
  5. 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 å bytte fra 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 nå alternativet “Desktop View”.

Merk at disse trinnene kan variere avhengig av telefonen du bruker.

Lette nettlesere – de beste 4

Forenkle mobilnettstedets design

Utviklerverktøy er flotte for å analysere og redigere en mobilversjon av et nettsted på en datamaskin uten å bytte enhet. Du kan endre skjermstørrelsen for å se hvordan komponenter fungerer på ulike enheter. Du kan justere forskjellige komponenter og bygge nettstedet for flere skjermstørrelser ved å bruke responsmodus.

Når du designer en nettside, må designeren alltid huske på hvordan frontenden av siden ser ut på telefoner, nettbrett og stasjonære datamaskiner. Å bruke metodene beskrevet i artikkelen kan også hjelpe utvikleren med å gjøre dette og også identifisere hvilke komponenter på et nettsted som skaper problemer for å fikse dem.

Similar Posts

Leave a Reply

Your email address will not be published.