Reageeriva Vaataja näitab praegust veebilehte renderdatuna mitmel seadme vaateava suurusel kõrvuti — kõik ühel ekraanil. Vaata, kuidas su disain näeb välja iPhone'il, iPadil, Androidi telefonidel, sülearvutitel ja lauaarvutitel samaaegselt. Keri üht vaateava ja kõik teised järgnevad, muutes sama sisu osa võrdlemise lihtsaks kõigis seadme suurustes.
Reageerivate disainide testimine tähendab traditsiooniliselt brauseriakna suuruse muutmist või DevToolsi seadme tööriistariba kasutamist vaateava suuruste vaheldumisi vahetamiseks. See toimib, kuid korraga saab näha ainult ühte suurust — muutes võimatuks võrrelda, kuidas jaotis näeb välja mobiilil vs lauaarvutil samaaegselt. Reageeriva Vaataja lahendab selle, renderdades lehte mitmes vaateavas korraga, kuvades need kõrvuti sinu ekraanil. Vali eelseadistatud seadmeprofiilide hulgast (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) või sisesta kohandatud mõõtmed. Iga vaateava on täielikult renderdatud lehe eksemplar, mitte staatiline ekraanipilt — keri üht ja kõik teised kerivad samasse positsiooni. See sünkroniseeritud kerimine laseb sul võrrelda täpselt sama sisualа kõigis seadme suurustes esmapilgul. See on kiireim viis reageerivate probleemide märkamiseks: navigeerimine, mis mähib valesti, pildid, mis ületavad oma konteinerid, tekst, mis muutub väikestel ekraanidel loetamatuks, või vahed, mis kukuvad kuidagi kokku.
Vaata praegust lehte renderdatuna samaaegselt mitmel vaateava suurusel, kuvades kõrvuti sinu ekraanil. Võrdle mobiili, tahvelarvuti ja lauaarvuti paigutusi esmapilgul ilma vaadete vahel vahetamata. Iga vaateava on lehe täisfunktsionaalne render.
Vali populaarsete seadme eelseadistuste teegist: 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). Eelseadistused uuendatakse praeguste seadmemõõtmetega.
Sisesta mis tahes kohandatud laius ja kõrgus mittestandartsete vaateava suuruste testimiseks. Kas pead kontrollima, kuidas leht näeb välja täpselt 768px laiusel (tavaline tahvelarvuti murdepunkt)? Lihtsalt kirjuta see sisse. Mitu kohandatud vaateava saab lisada koos eelseadistustega.
Keri üht vaateava ja kõik teised kerivad samale vertikaalsele positsioonile. See laseb sul võrrelda täpselt sama sisu jaotist kõigis seadme suurustes samaaegselt — vaata, kuidas kangelasala, hinnakiri või jalus renderdub mobiilil, tahvelarvutil ja lauaarvutil.
Iga vaateava kuvatakse realistliku seadmeraami sees — telefoni raamiservad, tahvelarvuti äärised, sülearvuti kroomraam. Visuaalne kontekst aitab sidusrühmadel aru saada, millist seadet iga vaateava esindab ülevaadete ja esitluste ajal.
Lülita üksikuid seadmeid sisse ja välja, et keskenduda konkreetsetele suuruste võrdlustele. Võrdled ainult mobiili ja lauaarvutit? Tühista tahvelarvuti eelseadistuste valik. Kas pead nägema ainult iPhone'e? Tühista kõigi teiste valik. Täielik kontroll selle üle, millised vaateavad on nähtavad.
Pärast reageeriva disaini rakendamist kasuta Reageerivat Vaatajat, et kontrollida, kas iga jaotis näeb õigesti välja kõigis sihitavates seadme suurustes. Tüüpide ülevoolu, pildi skaleerimise probleemid, navigeerimise kokkuvarisemise probleemid ja vahekauguse ebajärjepidevused — kõik ühes vaates.
Näita klientidele, kuidas nende veebisait näeb välja erinevates seadmetes ülevaatekoosoleku ajal. Kõrvutivaade on kohe intuitiivne — pole vaja selgitada vaateava kontseptsioone. Kliendid näevad mobiili, tahvelarvutit ja lauaarvutit samaaegselt.
Kas näed paigutuse katkemist konkreetsel laiusel? Lisa kohandatud vaateava täpses pikslilaiuses, kus probleem ilmneb, ja võrdle seda veidi laiemate ja kitsamate vaateavadega, et tuvastada, milline CSS murdepunkt probleemi põhjustab.
Kontrolli, kas pikad pealkirjad mähivad mobiilil õigesti, kas andmetabelid muutuvad väikestel ekraanidel keritavaks, kas vormi sisendid on piisavalt suured puutumiseks ja kas üleskutsed jäävad nähtavaks ja juurdepääsetavaks kõigis seadme suurustes.
Kasuta mitme-seadme vaadet veenvate reageeriva disaini tutvustuspiltide loomiseks. Tee ekraanipilt Reageerivast Vaatajast, mis näitab su disaini 3–4 seadme suuruses portfoolio esitlusteks.
Ava DevSuite Pro ujuv dokk ja klõpsa Reageeriva Vaataja ikoonil. Leht läheb üle mitme-vaateava režiimi, kus seadmeraamid kuvatakse kõrvuti.
Ülaosas olev seadmeriba näitab saadaolevaid eelseadistusi (iPhone, iPad, Pixel, MacBook, Desktop). Klõpsa seadmeid nende sisse/välja lülitamiseks. Valitud seadmed ilmuvad vaateavadena allpool.
Klõpsa nuppu "Kohandatud" ja sisesta konkreetsed laius × kõrgus mõõtmed kohandatud vaateava lisamiseks. Kasulik täpsete murdepunkti väärtuste testimiseks nagu 768px, 1024px või 1280px.
Keri mis tahes vaateava — kõik teised järgnevad samale positsioonile. Võrdle, kuidas sama jaotis näeb välja kõigis valitud seadme suurustes samaaegselt.
Klõpsa Reageeriva Vaataja ikoonil uuesti või sulgemisnupul, et väljuda mitme-vaateava režiimist ja naasta tavalisele ühelehevaatele.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
