Responsive Viewer prikazuje trenutnu web stranicu renderiranu u više veličina viewport-a uređaja jednu uz drugu — sve na jednom ekranu. Pogledajte kako vaš dizajn izgleda na iPhone, iPad, Android telefonima, laptopima i stolnim računalima istovremeno. Pomičite jedan viewport i svi ostali prate, što olakšava usporedbu istog dijela sadržaja na svim veličinama uređaja.
Testiranje responsive dizajna tradicionalno znači mijenjanje veličine prozora preglednika ili korištenje DevTools alatne trake uređaja za prebacivanje između veličina viewport-a jednu po jednu. To funkcionira, ali možete vidjeti samo jednu veličinu istovremeno — što onemogućuje usporedbu kako neki dio izgleda na mobilnom naspram stolnog računala u isto vrijeme. Responsive Viewer rješava to renderiranjem stranice u više viewport-ova odjednom, prikazanih jedne uz drugu na vašem ekranu. Odaberite iz unaprijed postavljenih profila uređaja (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) ili unesite prilagođene dimenzije. Svaki viewport je potpuno renderirana instanca stranice, ne statičan screenshot — pomičite jedan i svi ostali se pomiču na isti položaj. Ovo sinkronizirano pomicanje omogućuje vam usporedbu točno istog područja sadržaja na svim veličinama uređaja jednim pogledom. To je najbrži način za uočavanje responsive problema: navigacija koja se neispravno prelama, slike koje prelaze svoje spremnike, tekst koji postaje nečitljiv na malim ekranima ili razmaci koji se neuredno skupljaju.
Pogledajte trenutnu stranicu renderiranu istovremeno u više veličina viewport-a prikazanih jedne uz drugu na vašem ekranu. Usporedite mobilne, tablet i desktop izglede jednim pogledom bez prebacivanja između prikaza. Svaki viewport je potpuno funkcionalan prikaz stranice.
Odaberite iz knjižnice popularnih postavljenih uređaja: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) i Full HD Desktop (1920×1080). Postavke se ažuriraju s trenutnim dimenzijama uređaja.
Unesite bilo koju prilagođenu širinu i visinu za testiranje nestandardnih veličina viewport-a. Trebate provjeriti kako stranica izgleda točno pri 768px širine (uobičajeni tablet breakpoint)? Samo to upišite. Uz postavljene uređaje moguće je dodati više prilagođenih viewport-ova.
Pomičite jedan viewport i svi ostali se pomiču na isti vertikalni položaj. To vam omogućuje usporedbu točno istog dijela sadržaja na svim veličinama uređaja istovremeno — pogledajte kako se hero područje, tablica cijena ili podnožje renderiraju na mobilnom, tabletu i desktopu.
Svaki viewport je prikazan unutar realističnog okvira uređaja — obrubi telefona, rubovi tableta, laptop chrome. Vizualni kontekst pomaže dionicima razumjeti koji viewport predstavlja koji uređaj tijekom pregleda i prezentacija.
Uključujte i isključujte pojedinačne uređaje kako biste se usredotočili na specifične usporedbe veličina. Uspoređujete samo mobilni i desktop? Poništite odabir tablet postavljenih uređaja. Trebate vidjeti samo iPhone uređaje? Poništite odabir svega ostalog. Potpuna kontrola nad tim koji su viewport-ovi vidljivi.
Nakon implementacije responsive dizajna, koristite Responsive Viewer za provjeru da svaki dio izgleda ispravno na svim ciljanim veličinama uređaja. Uhvatite preljevanje teksta, probleme s skaliranjem slika, probleme skupljanja navigacije i nedosljednosti u razmacima — sve u jednom prikazu.
Pokažite klijentima kako njihova web stranica izgleda na različitim uređajima tijekom sastanka za pregled. Prikaz jedni uz druge je odmah intuitivan — nema potrebe za objašnjavanjem pojmova viewport-a. Klijenti mogu vidjeti mobilni, tablet i desktop istovremeno.
Vidite li da se izgled lomi na određenoj širini? Dodajte prilagođeni viewport na točnoj pixel širini gdje se problem pojavljuje i usporedite ga s nešto širim i užim viewport-ovima kako biste identificirali koji CSS breakpoint uzrokuje problem.
Provjerite prelaze li dugi naslovi ispravno na mobilnom, postaju li tablice podataka klizne na malim ekranima, jesu li polja za unos dovoljno velika za dodir i ostaju li CTA elementi vidljivi i dostupni na svim veličinama uređaja.
Koristite prikaz s više uređaja za stvaranje uvjerljivih showcase slika responsive dizajna. Snimite screenshot Responsive Viewer-a koji prikazuje vaš dizajn na 3-4 veličine uređaja za prezentacije portfelja.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Responsive Viewer. Stranica prelazi u višestruki viewport način rada s okvirima uređaja prikazanima jedni uz druge.
Traka uređaja na vrhu prikazuje dostupne postavke (iPhone, iPad, Pixel, MacBook, Desktop). Kliknite uređaje da ih uključite ili isključite. Odabrani uređaji pojavljuju se kao viewport-ovi ispod.
Kliknite gumb "Custom" i unesite određene dimenzije širine × visine da dodate prilagođeni viewport. Korisno za testiranje točnih breakpoint vrijednosti poput 768px, 1024px ili 1280px.
Pomičite bilo koji viewport — svi ostali prate na isti položaj. Usporedite kako isti dio izgleda na svim odabranim veličinama uređaja istovremeno.
Kliknite ikonu Responsive Viewer još jednom ili gumb za zatvaranje da izađete iz načina rada s više viewport-ova i vratite se na normalni prikaz jedne stranice.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
