Cum să vizualizați versiunea mobilă a unui site web pe un computer

Dacă sunteți dezvoltator web sau dețineți o afacere online, ați putea fi curios să aflați cum arată un site mobil pe un desktop. Aspectul și funcționalitatea site-ului dvs. mobil ar putea fi cruciale, deoarece mai mult de jumătate din traficul de internet provine de la telefoane. Clienții sunt mai probabil să rămână pe un site mai mult timp sau să cumpere ceva dacă este atrăgător din punct de vedere vizual. O vizualizare desktop vă poate ajuta, de asemenea, să faceți modificări și să remediați posibilele probleme mai devreme.

Din fericire, acesta este un proces relativ simplu. În acest articol, vă vom arăta cum să vizualizați o versiune mobilă a unui site web pe diferite dispozitive și browsere.

Cum să vizualizați versiunea mobilă a unui site web în Chrome pe un Mac

În Chrome, puteți testa front-end-ul și puteți vedea dacă toate componentele site-ului web funcționează corect utilizând un instrument de dezvoltare încorporat numit DevTools. Deoarece oferă opțiuni predefinite pentru dispozitive, DevTools este cea mai bună modalitate prin care dezvoltatorul poate schimba rapid vizualizarea de la desktop la mobil și invers, fără extensii de dezvoltator.

De asemenea, puteți modifica dimensiunea ecranului pentru a se potrivi nevoilor dvs. și puteți ajusta lățimea și înălțimea ecranului pentru a vedea cum va arăta site-ul dvs. pe diferite dimensiuni de ecran. Pentru a face acest lucru pe un Mac, urmați acești pași:

1. Lansați browserul Google Chrome și accesați site-ul pe care doriți să îl vizualizați.
   
2. Apăsați F12 de pe tastatură pentru a accesa DevTools.
   
3. Când modul este activat, faceți clic pe pictograma „Toggle Device Emulation”.
   
4. Puteți alege dintr-o listă de dispozitive iOS și Android pentru a le emula.
   
5. Acesta va afișa site-ul web în formularul mobil pe care l-ați ales.
   

Când ați terminat, închideți fereastra instrumentelor pentru dezvoltatori pentru a închide versiunea mobilă a site-ului web.

Cum să vizualizați versiunea mobilă a unui site web în Chrome pe un computer cu Windows

Dacă doriți să vizualizați o versiune mobilă a unui site web pe un computer Windows în Chrome, este un proces destul de similar:

1. Deschideți browserul Chrome.
   
2. În Chrome, accesați site-ul web pe care doriți să îl vedeți în versiunea mobilă.
3. Faceți clic dreapta pe pagina web și selectați „Inspectați” din meniu.
   
4. Pentru a accesa Instrumente pentru dezvoltatori, faceți clic pe fila „Mai multe instrumente” și selectați „Instrumente pentru dezvoltatori” sau apăsați F12 pentru a deschide DevTools.
   
5. Se va deschide fereastra Instrumente pentru dezvoltatori.
6. Faceți clic pe pictograma de comutare dispozitiv pentru a comuta la modul Vizualizare site mobil.
   
7. Alegeți dispozitivul mobil pe care doriți să-l emulați (opțional).
   
8. Acum puteți modifica dimensiunile ecranului pentru a se potrivi nevoilor dvs.

Cum să vizualizați versiunea mobilă a unui site web în Chrome pe un Chromebook

Accesarea versiunii mobile a unui site web în Chrome folosind un Chromebook este foarte asemănătoare cu primele două metode.

1. Deschideți browserul web Google Chrome.
   
2. Deschideți pagina web pe care doriți să o accesați pe dispozitivul dvs. mobil.
   
3. Pentru a accesa meniul, faceți clic pe pictograma verticală cu trei puncte.
   
4. Trageți mouse-ul peste elementul Mai multe instrumente din listă.
   
5. Selectați „Instrumente pentru dezvoltatori”.
   
6. Se va deschide fereastra Instrumente pentru dezvoltatori din browser.
   
7. Comutați modul de vizualizare a site-ului mobil făcând clic pe pictograma de comutare a dispozitivului.
   

Aceasta va afișa interfața de utilizator pentru site-ul mobil. De asemenea, puteți alege experiența preferată a dispozitivului selectând marca și modelul din caseta drop-down. Pagina web se va reîmprospăta ca site desktop ori de câte ori închideți consola instrumentelor pentru dezvoltatori.

Cum să vizualizați versiunea mobilă a unui site web în Firefox pe un Mac

Puteți utiliza alte browsere web, cum ar fi Firefox, pentru a vizualiza un site mobil pe un desktop Mac. Redimensionarea ferestrei browserului este una dintre metodele pe care majoritatea dezvoltatorilor web le folosesc pentru a evalua site-ul web cu design responsive. Cu toate acestea, de cele mai multe ori, această alternativă nu va părea acceptabilă.

Acolo sunt utile capabilitățile de dezvoltare web ale browserului Firefox. Vă puteți răsfoi paginile web în mai multe rezoluții dacă știți cum să accesați versiunile mobile ale site-urilor web în Firefox. Urmați acești pași:

1. Deschideți versiunea mobilă a site-ului web pe care doriți să-l vedeți.
2. Faceți clic dreapta pe pagina web și selectați opțiunea „Inspectați” din meniu.
   
3. Alegeți „Modul de design receptiv”.
   
4. Alegeți dimensiunea ecranului site-ului web.
   

Cum să vizualizați versiunea mobilă a unui site web în Firefox pe un computer cu Windows

PC-urile Windows au, de asemenea, opțiunea de a vizualiza versiunile mobile ale site-urilor web folosind Firefox. Iată cum să faci asta:

1. Porniți Firefox pe computer.
   
2. Accesați site-ul web pe care doriți să îl vedeți ca versiune mobilă.
   
3. Accesați „Setări” făcând clic pe pictograma cu trei bare orizontale.
   
4. Veți vedea un meniu derulant în care va trebui să alegeți o opțiune „Dezvoltator web”.
   
5. Selectați „Modul de design receptiv”.
   
6. În cele din urmă, puteți selecta un model de smartphone pentru a vedea cum va apărea site-ul dvs. pe acel dispozitiv.
   

Cum să vizualizați versiunea mobilă a unui site web în Safari pe un Mac

Am explicat cum să vizualizați un site web mobil pe un desktop folosind Chrome și Firefox. Dar ce rămâne cu browserul implicit care vine cu dispozitivele Mac, Safari? Din fericire, este posibil să vizualizați o versiune mobilă a unui site web și în Safari.

1. Lansați browserul Safari.
   
2. Accesați site-ul web pe care doriți să îl vizualizați ca versiune mobilă.
   
3. Faceți clic pe „Opțiuni” și apoi pe meniul „Dezvoltare”.
   
4. Din meniul drop-down, alegeți „Intrați în modul Design receptiv”.
   
5. Acum puteți vizualiza versiunea mobilă a site-ului.
   

Întrebări frecvente suplimentare

Pot vedea versiunea desktop a unui site web pe telefonul meu?

Raspunsul este da! Puteți trece de la versiunea mobilă la versiunea desktop pentru a o verifica fără a utiliza un computer. Pașii pentru a trece versiunea mobilă la versiunea desktop în Chrome sunt următorii:

1. Accesați site-ul web pe care doriți să-l vedeți în vizualizarea desktop.

2. Atingeți pictograma cu trei puncte pentru a accesa meniul.

3. Selectați acum opțiunea „Vizualizare desktop”.

Rețineți că acești pași pot varia în funcție de telefonul pe care îl utilizați.

Ușurând proiectarea web mobilă

Instrumentele pentru dezvoltatori sunt excelente pentru a analiza și modifica o versiune mobilă a unui site web pe un desktop fără a schimba dispozitivele. Puteți modifica dimensiunea ecranului pentru a observa cum funcționează componentele pe diferite dispozitive. Puteți ajusta diferite componente și puteți crea site-ul web pentru mai multe dimensiuni de ecran folosind modul responsive.

Atunci când proiectează un site web, designerul ar trebui să țină mereu cont de modul în care partea frontală a site-ului apare pe telefoane, tablete și desktop-uri. Folosirea metodelor descrise în articol poate ajuta, de asemenea, dezvoltatorul să facă acest lucru și, de asemenea, să identifice ce componente ale unui site web creează probleme pentru a le remedia.

Ați încercat vreodată să vizualizați o versiune mobilă a unui site pe desktop? Ce browser preferați să utilizați pentru a face acest lucru? Anunțați-ne în secțiunea de comentarii de mai jos.