Kako pogledati mobilnu verziju web stranice na računalu

Ako ste web programer ili imate online tvrtku, možda ćete biti znatiželjni da saznate kako mobilna stranica izgleda na stolnom računalu. Izgled i funkcionalnost vaše mobilne stranice mogli bi biti presudni jer više od polovice internetskog prometa dolazi s telefona. Vjerojatnije je da će kupci dulje ostati na stranici ili kupiti nešto ako je vizualno privlačno. Prikaz na radnoj površini također bi vam mogao pomoći da izvršite izmjene i prije riješite moguće probleme.

Na sreću, ovo je relativno jednostavan proces. U ovom članku ćemo vam pokazati kako pregledati mobilnu verziju web-mjesta na različitim uređajima i preglednicima.

Kako pogledati mobilnu verziju web-mjesta u Chromeu na Macu

U Chromeu možete testirati prednji kraj i vidjeti rade li sve komponente web-mjesta ispravno pomoću ugrađenog alata za razvojne programere pod nazivom DevTools. Budući da pruža unaprijed definirane izbore uređaja, DevTools je najbolji način za razvojnog programera da brzo prebaci pogled s desktopa na mobilni i obrnuto bez ikakvih proširenja za razvojne programere.

Također možete promijeniti veličinu zaslona kako bi odgovarala vašim potrebama i prilagoditi širinu i visinu zaslona kako biste vidjeli kako će vaša web stranica izgledati na različitim veličinama zaslona. Da biste to učinili na Mac računalu, slijedite ove korake:

1. Pokrenite preglednik Google Chrome i idite na stranicu koju želite pogledati.
   
2. Pritisnite F12 na tipkovnici za pristup DevTools.
   
3. Kada je način rada uključen, kliknite ikonu Prebaci emulaciju uređaja.
   
4. Možete birati s popisa iOS i Android uređaja da biste ih oponašali.
   
5. Prikazat će web stranicu u mobilnom obliku koji ste odabrali.
   

Kada završite, samo zatvorite prozor alata za razvojne programere da biste zatvorili mobilnu verziju web-mjesta.

Kako pogledati mobilnu verziju web-mjesta u Chromeu na računalu sa sustavom Windows

Ako želite vidjeti mobilnu verziju web-mjesta na Windows PC-u u Chromeu, to je prilično sličan proces:

1. Otvorite preglednik Chrome.
   
2. U Chromeu idite na web-mjesto koje želite vidjeti u mobilnoj verziji.
3. Desnom tipkom miša kliknite web stranicu i s izbornika odaberite Inspect.
   
4. Da biste otišli na Alati za razvojne programere, kliknite karticu Više alata i odaberite Alati za razvojne programere ili pritisnite F12 da otvorite DevTools.
   
5. Otvorit će se prozor Alati za razvojne programere.
6. Kliknite ikonu za uključivanje/isključivanje uređaja da biste se prebacili na način prikaza mobilne stranice.
   
7. Odaberite mobilni uređaj koji želite oponašati (nije obavezno).
   
8. Sada možete mijenjati dimenzije zaslona kako bi odgovarale vašim potrebama.

Kako pogledati mobilnu verziju web-mjesta u Chromeu na Chromebooku

Pristup mobilnoj verziji web-mjesta u Chromeu pomoću Chromebooka vrlo je sličan prva dva načina.

1. Otvorite web-preglednik Google Chrome.
   
2. Otvorite web-stranicu kojoj želite pristupiti na svom mobilnom uređaju.
   
3. Da biste pristupili izborniku, kliknite ikonu okomite tri točke.
   
4. Povucite mišem preko stavke Više alata na popisu.
   
5. Odaberite Alati za razvojne programere.
   
6. Otvorit će se prozor Alati za razvojne programere u pregledniku.
   
7. Uključite način prikaza mobilnog web-mjesta klikom na ikonu za uključivanje/isključivanje uređaja.
   

Ovo će prikazati korisničko sučelje za mobilnu stranicu. Također možete odabrati željeni doživljaj uređaja odabirom marke i modela iz padajućeg okvira. Web-stranica će se osvježiti kao stolna stranica kad god zatvorite konzolu alata za razvojne programere.

Kako pogledati mobilnu verziju web stranice u Firefoxu na Macu

Možete koristiti druge web-preglednike kao što je Firefox za pregled mobilnog web-mjesta na računalu Mac. Promjena veličine prozora preglednika jedna je od metoda koje većina web programera koristi za procjenu web stranice responzivnog dizajna. Međutim, većinu vremena ova alternativa se neće činiti prihvatljivom.

Tu su korisne mogućnosti web-razvoja preglednika Firefox. Svoje web stranice možete pregledavati u više razlučivosti ako znate kako pristupiti mobilnim verzijama web stranica u Firefoxu. Prati ove korake:

1. Otvorite mobilnu verziju web stranice koju želite vidjeti.
2. Desnom tipkom miša kliknite web stranicu i s izbornika odaberite opciju Inspect.
   
3. Odaberite način responzivnog dizajna.
   
4. Odaberite veličinu zaslona web stranice.
   

Kako pogledati mobilnu verziju web-mjesta u Firefoxu na računalu sa sustavom Windows

Windows računala također imaju mogućnost pregleda mobilnih verzija web-mjesta pomoću Firefoxa. Evo kako to učiniti:

1. Pokrenite Firefox na svom računalu.
   
2. Idite na web mjesto koje želite vidjeti kao mobilnu verziju.
   
3. Idite na Postavke klikom na vodoravnu ikonu s tri trake.
   
4. Vidjet ćete padajući izbornik u kojem ćete morati odabrati opciju Web Developer.
   
5. Odaberite način responzivnog dizajna.
   
6. Konačno, možete odabrati model pametnog telefona da vidite kako će se vaša stranica pojaviti na tom uređaju.
   

Kako pogledati mobilnu verziju web-mjesta u Safariju na Macu

Pregledali smo kako pregledati mobilnu web stranicu na stolnom računalu pomoću Chromea i Firefoxa. Ali što je sa zadanim preglednikom koji dolazi uz Mac uređaje, Safari? Srećom, u Safariju je moguće pogledati i mobilnu verziju web stranice.

1. Pokrenite preglednik Safari.
   
2. Idite na web mjesto koje želite vidjeti kao mobilnu verziju.
   
3. Kliknite na Opcije, a zatim na izbornik Razvoj.
   
4. Na padajućem izborniku odaberite Uđi u način responzivnog dizajna.
   
5. Sada možete pogledati mobilnu verziju web stranice.
   

Dodatna FAQ

Mogu li na svom telefonu pogledati verziju web-mjesta za stolno računalo?

Odgovor je da! Možete se prebaciti s mobilne verzije na verziju za stolno računalo da biste je provjerili bez korištenja računala. Koraci za prebacivanje mobilne verzije na verziju za stolno računalo u Chromeu su sljedeći:

1. Idite na web mjesto koje želite vidjeti u prikazu radne površine.

2. Dodirnite ikonu s tri točke za pristup izborniku.

3. Sada odaberite opciju Desktop View.

Imajte na umu da se ovi koraci mogu razlikovati ovisno o telefonu koji koristite.

kako otvoriti .dmg datoteke na Windowsima

Olakšavanje dizajna mobilnog weba

Alati za razvojne programere izvrsni su za analizu i izmjenu mobilne verzije web-mjesta na stolnom računalu bez mijenjanja uređaja. Možete promijeniti veličinu zaslona da biste vidjeli kako komponente funkcioniraju na različitim uređajima. Možete prilagoditi različite komponente i izraditi web stranicu za više veličina zaslona koristeći responzivni način.

Kada dizajnira web stranicu, dizajner uvijek treba imati na umu kako se prednji dio stranice pojavljuje na telefonima, tabletima i stolnim računalima. Korištenje metoda opisanih u članku također može pomoći razvojnom programeru u tome i identificirati koje komponente web-mjesta stvaraju probleme za njihovo rješavanje.

Jeste li ikada pokušali pregledati mobilnu verziju web-mjesta na svom desktopu? Koji preglednik radije koristite za to? Javite nam u odjeljku za komentare u nastavku.