Responsive Viewer näyttää nykyisen verkkosivun renderöitynä useassa eri laiteikkunakoossa rinnakkain — kaikki yhdellä näytöllä. Katso miltä suunnitelmasi näyttää iPhone-, iPad-, Android-puhelin-, kannettava- ja pöytätietokonenäkymissä samanaikaisesti. Vieritä yhtä ikkunaa ja kaikki muut seuraavat, joten saman sisältöalueen vertailu eri laitekoissa on vaivatonta.
Responsiivisten suunnitelmien testaaminen tarkoittaa perinteisesti selaimen ikkunan koon muuttamista tai DevToolsin laitetyökalurivin käyttämistä — yksi koko kerrallaan. Tämä toimii, mutta voit nähdä vain yhden koon kerrallaan, joten mobiilin ja desktopin rinnakkaisvertailu on mahdotonta. Responsive Viewer ratkaisee tämän renderöimällä sivun useaan ikkunaan samanaikaisesti, rinnakkain näytöllä. Valitse valmiista laiteprofiileista (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) tai syötä omat mitat. Jokainen ikkuna on täysin renderöity versio sivusta, ei staattinen kuvakaappaus — vieritä yhtä ja kaikki muut vierittyvät samaan kohtaan. Tämä synkronoitu vieritys mahdollistaa täsmälleen saman sisältöalueen vertaamisen kaikkien laitekokojen välillä yhdellä silmäyksellä. Se on nopein tapa havaita responsiivisuusongelmat: virheellisesti rivityvä navigaatio, kuvat jotka ylittävät säiliönsä rajat, pienillä näytöillä vaikeasti luettava teksti tai hankalasti kutistuva välistys.
Näe nykyinen sivu renderöitynä samanaikaisesti useassa ikkunakoossa rinnakkain näytölläsi. Vertaa mobiili-, tabletti- ja desktop-asetteluja yhdellä silmäyksellä ilman näkymien välillä vaihtamista. Jokainen ikkuna on täysin toimiva renderöinti sivusta.
Valitse suosituista laitevalmiuksista: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) ja Full HD Desktop (1920×1080). Valmiudet päivitetään laitteiden nykyisillä mitoilla.
Syötä mikä tahansa mukautettu leveys ja korkeus ei-standardien ikkunakokojen testaamiseen. Haluatko tarkistaa miltä sivu näyttää tarkalleen 768px leveydellä (yleinen tablettikatkoskohta)? Kirjoita se vain kenttään. Mukautettuja ikkunoita voi lisätä valmiiden rinnalle.
Vieritä yhtä ikkunaa ja kaikki muut vierittyvät samaan pystysuoraan kohtaan. Tämä mahdollistaa täsmälleen saman sisältöalueen vertaamisen kaikkien laitekokojen välillä samanaikaisesti — katso miten hero-alue, hinnoittelutaulukko tai alatunniste renderöityy mobiilissa, tabletissa ja desktopissa.
Jokainen ikkuna näytetään realistisessa laitekehyksessä — puhelinten reunukset, tablettien reunat, kannettavien kehykset. Visuaalinen asiayhteys auttaa sidosryhmiä ymmärtämään, mitä laitetta kukin ikkuna edustaa arvioinneissa ja esittelyissä.
Kytke yksittäisiä laitteita päälle ja pois päältä keskittyäksesi tiettyihin kokovertailuihin. Vertailetko vain mobiilia ja desktopia? Poista tablettivalmiudet valinnoista. Haluatko nähdä vain iPhoneja? Poista kaikki muut valinnat. Täysi hallinta siihen, mitkä ikkunat ovat näkyvissä.
Responsiivisen suunnittelun toteutuksen jälkeen käytä Responsive Vieweria varmistaaksesi, että jokainen osio näyttää oikealta kaikissa kohdelaitteissa. Havaitse tekstin ylivuoto, kuvan skaalausongelmia, navigoinnin kutistumisongelmat ja välistysepäjohdonmukaisuudet — kaikki yhdessä näkymässä.
Näytä asiakkaille miltä heidän verkkosivustonsa näyttää eri laitteilla arviointikokouksen aikana. Rinnakkaisnäkymä on välittömästi intuitiivinen — ikkunakäsitteitä ei tarvitse selitellä. Asiakkaat näkevät mobiilin, tabletin ja desktopin samanaikaisesti.
Näetkö asettelun rikkoutuvan tietyllä leveydellä? Lisää mukautettu ikkuna tarkalleen siihen pikselileveyteen, jossa ongelma ilmenee, ja vertaa sitä hieman leveämpiin ja kapeampiin ikkunoihin selvittääksesi, mikä CSS-katkoskohta aiheuttaa ongelman.
Tarkista rivityvätkö pitkät otsikot oikein mobiilissa, muuttuvatko datataulukot vieritettäviksi pienillä näytöillä, ovatko lomakekentät riittävän suuria napautettaviksi, ja pysyvätkö CTA-painikkeet näkyvinä ja saavutettavina kaikissa laitekoissa.
Käytä monilaite-näkymää luodaksesi vaikuttavia responsiivisen suunnittelun esittelykuvia. Ota kuvakaappaus Responsive Viewerista, joka näyttää suunnitelmasi 3–4 eri laitteessa portfolioesityksiä varten.
Avaa DevSuite Pro -kelluva telakka ja napsauta Responsive Viewer -kuvaketta. Sivu siirtyy moni-ikkunatilaan, jossa laitekehykset näytetään rinnakkain.
Yläosan laitepalkki näyttää käytettävissä olevat valmiudet (iPhone, iPad, Pixel, MacBook, Desktop). Napsauta laitteita kytkeäksesi ne päälle tai pois. Valitut laitteet näkyvät ikkunoina alla.
Napsauta "Mukautettu"-painiketta ja syötä tietty leveys × korkeus lisätäksesi mukautetun ikkunan. Hyödyllinen tarkkojen katkoskohta-arvojen testaamiseen, kuten 768px, 1024px tai 1280px.
Vieritä mitä tahansa ikkunaa — kaikki muut seuraavat samaan kohtaan. Vertaa miltä sama osio näyttää kaikissa valituissa laitekoissa samanaikaisesti.
Napsauta Responsive Viewer -kuvaketta uudelleen tai sulje-painiketta poistuaksesi moni-ikkunatilasta ja palataksesi normaaliin yksisivunäkymään.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
