Com veure la versió mòbil d'un lloc web en un ordinador

Si sou un desenvolupador web o teniu un negoci en línia, potser us interessa saber com es veu un lloc per a mòbils a un escriptori. L'aspecte i la funcionalitat del vostre lloc mòbil poden ser crucials, ja que més de la meitat del trànsit d'Internet prové dels telèfons. És més probable que els clients romanguin més temps en un lloc o comprin alguna cosa si és visualment atractiu. Una vista d'escriptori també us pot ajudar a fer modificacions i solucionar possibles problemes més aviat.

Afortunadament, aquest és un procés relativament senzill. En aquest article, us mostrarem com veure una versió mòbil d'un lloc web en diferents dispositius i navegadors.

Com veure la versió mòbil d'un lloc web a Chrome en un Mac

A Chrome, podeu provar la portada i veure si tots els components del lloc web funcionen correctament mitjançant una eina de desenvolupament integrada anomenada DevTools. Com que ofereix opcions de dispositiu predefinides, DevTools és la millor manera perquè el desenvolupador canviï ràpidament la vista de l'escriptori al mòbil i viceversa sense cap extensió de desenvolupador.

També podeu canviar la mida de la pantalla per adaptar-se a les vostres necessitats i ajustar l'amplada i l'alçada de la pantalla per veure com es veurà el vostre lloc web en diferents mides de pantalla. Per fer-ho en un Mac, seguiu aquests passos:

1. Inicieu el navegador Google Chrome i aneu al lloc que voleu veure.
   
2. Premeu F12 al vostre teclat per accedir a DevTools.
   
3. Quan el mode estigui activat, feu clic a la icona Commuta l'emulació del dispositiu.
   
4. Podeu triar entre una llista de dispositius iOS i Android per emular-los.
   
5. Mostrarà el lloc web al formulari mòbil que hàgiu escollit.
   

Quan hàgiu acabat, tanqueu la finestra d'eines per a desenvolupadors per tancar la versió mòbil del lloc web.

Com veure la versió mòbil d'un lloc web a Chrome en un ordinador amb Windows

Si voleu veure una versió mòbil d'un lloc web a Windows PC a Chrome, és un procés força similar:

1. Obriu el navegador Chrome.
   
2. A Chrome, aneu al lloc web que voleu veure a la versió mòbil.
3. Feu clic amb el botó dret a la pàgina web i seleccioneu Inspeccionar al menú.
   
4. Per anar a Eines per a desenvolupadors, feu clic a la pestanya Més eines i seleccioneu Eines per a desenvolupadors o premeu F12 per obrir DevTools.
   
5. S'obrirà la finestra Eines per a desenvolupadors.
6. Feu clic a la icona de commutació del dispositiu per canviar al mode de visualització del lloc mòbil.
   
7. Trieu el dispositiu mòbil que voleu emular (opcional).
   
8. Ara podeu modificar les dimensions de la pantalla segons les vostres necessitats.

Com veure la versió mòbil d'un lloc web a Chrome en un Chromebook

L'accés a la versió mòbil d'un lloc web a Chrome amb un Chromebook és molt semblant als dos primers mètodes.

1. Obriu el navegador web Google Chrome.
   
2. Obriu la pàgina web a la qual voleu accedir al vostre dispositiu mòbil.
   
3. Per accedir al menú, feu clic a la icona vertical de tres punts.
   
4. Arrossegueu el ratolí per sobre de l'element Més eines de la llista.
   
5. Seleccioneu Eines per a desenvolupadors.
   
6. S'obrirà la finestra Eines per a desenvolupadors al navegador.
   
7. Commuteu el mode de visualització del lloc mòbil fent clic a la icona de commutació del dispositiu.
   

Això mostrarà la interfície d'usuari del lloc mòbil. També podeu triar l'experiència del dispositiu preferida seleccionant la marca i el model al quadre desplegable. La pàgina web s'actualitzarà com a lloc d'escriptori sempre que tanqueu la consola d'eines per a desenvolupadors.

Com veure la versió mòbil d'un lloc web a Firefox en un Mac

Podeu utilitzar altres navegadors web com Firefox per veure un lloc mòbil en un escriptori Mac. Canviar la mida de la finestra del navegador és un dels mètodes que utilitzen la majoria de desenvolupadors web per avaluar el lloc web de disseny responsive. Tanmateix, la majoria de vegades, aquesta alternativa no semblarà acceptable.

Aquí és on les capacitats de desenvolupament web del navegador Firefox són útils. Podeu navegar per les vostres pàgines web en diverses resolucions si sabeu com accedir a les versions mòbils dels llocs web a Firefox. Seguiu aquests passos:

1. Obriu la versió mòbil del lloc web que voleu veure.
2. Feu clic amb el botó dret a la pàgina web i seleccioneu l'opció Inspeccionar al menú.
   
3. Trieu el mode de disseny responsiu.
   
4. Trieu la mida de la pantalla del lloc web.
   

Com veure la versió mòbil d'un lloc web a Firefox en un ordinador amb Windows

Els ordinadors amb Windows també tenen l'opció de veure les versions mòbils dels llocs web amb Firefox. A continuació s'explica com fer-ho:

1. Inicieu Firefox al vostre ordinador.
   
2. Aneu al lloc web que voleu veure com a versió mòbil.
   
3. Aneu a Configuració fent clic a la icona de tres barres horitzontals.
   
4. Veureu un menú desplegable on haureu de triar una opció de desenvolupador web.
   
5. Seleccioneu el mode de disseny responsiu.
   
6. Finalment, podeu seleccionar un model de telèfon intel·ligent per veure com apareixerà el vostre lloc en aquest dispositiu.
   

Com veure la versió mòbil d'un lloc web a Safari en un Mac

Hem explicat com veure un lloc web per a mòbils en un ordinador amb Chrome i Firefox. Però, què passa amb el navegador predeterminat que inclou els dispositius Mac, Safari? Afortunadament, també és possible veure una versió mòbil d'un lloc web a Safari.

1. Inicieu el navegador Safari.
   
2. Aneu al lloc web que voleu veure com a versió mòbil.
   
3. Feu clic a Opcions i després al menú Desenvolupament.
   
4. Al menú desplegable, trieu Entra en el mode de disseny responsiu.
   
5. Ara podeu veure la versió mòbil del lloc web.
   

PMF addicionals

Puc veure la versió d'escriptori d'un lloc web al meu telèfon?

La resposta és sí! Podeu canviar de la versió mòbil a la versió d'escriptori per comprovar-ho sense utilitzar un ordinador. Els passos per canviar la versió mòbil a la versió d'escriptori a Chrome són els següents:

1. Aneu al lloc web que voleu veure a la vista d'escriptori.

2. Toqueu la icona de tres punts per accedir al menú.

3. Seleccioneu l'opció Visualització d'escriptori ara.

Tingueu en compte que aquests passos poden variar segons el telèfon que utilitzeu.

com trobar IP per al servidor Minecraft

Fent més fàcil el disseny web mòbil

Les eines de desenvolupament són excel·lents per analitzar i modificar una versió mòbil d'un lloc web en un escriptori sense canviar de dispositiu. Podeu canviar la mida de la pantalla per observar com funcionen els components en diversos dispositius. Podeu ajustar diferents components i crear el lloc web per a diverses mides de pantalla mitjançant el mode de resposta.

Quan dissenyeu un lloc web, el dissenyador sempre ha de tenir en compte com apareix la part frontal del lloc als telèfons, tauletes i ordinadors de sobretaula. L'ús dels mètodes descrits a l'article també pot ajudar el desenvolupador a fer-ho i també a identificar quins components d'un lloc web estan creant problemes per solucionar-los.

Alguna vegada has provat de veure una versió mòbil d'un lloc a l'escriptori? Quin navegador prefereixes utilitzar per fer-ho? Feu-nos-ho saber a la secció de comentaris a continuació.