A Responsive Viewer az aktuális weboldalt egyszerre több eszköz-nézőablak méretben jeleníti meg egymás mellett — egyetlen képernyőn. Nézd meg, hogyan néz ki a terveid iPhone-on, iPaden, Android telefonokon, laptopokon és asztali számítógépeken egyidejűleg. Görgess az egyik nézőablakban, és az összes többi követi — így könnyen összehasonlíthatod ugyanazt a tartalomrészt minden eszközméretben.
A reszponzív tervek tesztelése hagyományosan a böngészőablak átméretezését vagy a DevTools eszköztárának használatát jelenti, hogy egyenként váltson a nézőablak-méretek között. Ez működik, de egyszerre csak egy méretet láthat — lehetetlenné téve az összehasonlítást, hogy egy szakasz hogyan néz ki mobilon és asztali számítógépen egyszerre. A Responsive Viewer ezt úgy oldja meg, hogy egyszerre több nézőablakban rendereli az oldalt, egymás mellett megjelenítve a képernyőn. Válassz előre beállított eszközprofilok közül (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) vagy adj meg egyéni méreteket. Minden nézőablak az oldal teljesen renderelt példánya, nem statikus képernyőkép — görgess egyet, és az összes többi ugyanarra a pozícióra görget. Ez a szinkronizált görgetés lehetővé teszi, hogy egyetlen pillantásra összehasonlítsd a pontos tartalomterületet az összes eszközméretben. Ez a leggyorsabb módszer a reszponzív problémák felismerésére: helytelenül tördelődő navigáció, a konténerükből kilógó képek, kis képernyőkön olvashatatlanná váló szöveg, vagy esetlenül összeomló térközök.
Nézd az aktuális oldalt egyszerre több nézőablak-méretben megjelenítve egymás mellett a képernyőn. Hasonlítsd össze a mobil, tablet és asztali elrendezéseket egyetlen pillantásra anélkül, hogy váltogatnál a nézetek között. Minden nézőablak az oldal teljesen funkcionális renderelése.
Válassz a népszerű eszköz-előbeállítások könyvtárából: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) és Full HD Desktop (1920×1080). Az előbeállítások aktuális eszközméretekkel kerülnek frissítésre.
Adj meg bármilyen egyéni szélességet és magasságot nem szabványos nézőablak-méretek teszteléséhez. Meg kell nézned, hogyan néz ki az oldal pontosan 768px szélességen (a megszokott tablet töréspont)? Egyszerűen írd be. Több egyéni nézőablak is hozzáadható az előbeállítások mellé.
Görgess az egyik nézőablakban, és az összes többi ugyanarra a függőleges pozícióra görget. Ez lehetővé teszi, hogy egyidejűleg összehasonlítsd a pontos tartalomrészt az összes eszközméretben — nézd meg, hogyan renderelődik a hero terület, az árazási táblázat vagy a lábléc mobilon, tableten és asztali számítógépen.
Minden nézőablak valósághű eszközkereten belül jelenik meg — telefon kávák, tablet keretek, laptop chrome. A vizuális kontextus segít az érintetteknek megérteni, hogy melyik nézőablak melyik eszközt képviseli az értékelések és bemutatók során.
Kapcsolj egyes eszközöket be és ki, hogy konkrét méret-összehasonlításokra összpontosíts. Csak mobilon és asztali számítógépen hasonlítasz össze? Kapcsold ki a tablet előbeállításokat. Csak iPhone-okat szeretnél látni? Kapcsolj ki mindent mást. Teljes irányítás felett, hogy mely nézőablakok legyenek láthatók.
Egy reszponzív design megvalósítása után használd a Responsive Viewer-t annak ellenőrzésére, hogy minden szakasz helyesen néz ki az összes céleszköz-méreten. Fogj el szöveg-túlcsordulást, képméretezési problémákat, navigáció-összeomlási gondokat és térköz-következetlenségeket — mindezt egyetlen nézetben.
Mutasd meg az ügyfeleknek, hogyan néz ki weboldaluk különböző eszközökön egy értékelési megbeszélés során. Az egymás melletti nézet azonnal intuitív — nem kell magyarázni a nézőablak-fogalmakat. Az ügyfelek egyszerre láthatják a mobil, tablet és asztali változatot.
Egy konkrét szélességnél elrendezési törést tapasztalsz? Adj hozzá egyéni nézőablakot a pontos pixel-szélességnél, ahol a probléma fellép, és hasonlítsd össze az enyhén szélesebb és keskenebb nézőablakokkal, hogy azonosítsd, melyik CSS töréspont okozza a problémát.
Ellenőrizd, hogy a hosszú fejlécek helyesen törnek-e mobilon, az adattáblák kis képernyőkön görgethetővé válnak-e, a formelemek elég nagyok-e a megérintéshez, és hogy a CTA-k láthatók és hozzáférhetők-e maradnak az összes eszközméretben.
Használd a többeszközös nézetet lenyűgöző reszponzív design-bemutató képek létrehozásához. Készíts képernyőfotót a Responsive Viewer-ről, amely 3-4 eszközméretben mutatja a tervedet portfólió-prezentációkhoz.
Nyisd meg a DevSuite Pro lebegő dockot, és kattints a Responsive Viewer ikonra. Az oldal több nézőablakos módba vált, az eszközkeretekkel egymás mellett megjelenítve.
A felső eszközsáv megmutatja az elérhető előbeállításokat (iPhone, iPad, Pixel, MacBook, Desktop). Kattints az eszközökre a be-/kikapcsolásukhoz. A kiválasztott eszközök alul nézőablakokként jelennek meg.
Kattints az "Egyéni" gombra, és adj meg konkrét szélesség × magasság méreteket egyéni nézőablak hozzáadásához. Hasznos pontos töréspont-értékek, mint 768px, 1024px vagy 1280px teszteléséhez.
Görgess bármelyik nézőablakban — az összes többi követi ugyanarra a pozícióra. Hasonlítsd össze, hogyan néz ki ugyanaz a szakasz az összes kiválasztott eszközméretben egyszerre.
Kattints a Responsive Viewer ikonra ismét, vagy a bezárás gombra a többnézetes módból való kilépéshez és a normál egynézetes megjelenítéshez való visszatéréshez.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
