Το Responsive Viewer δείχνει την τρέχουσα ιστοσελίδα αποδοσμένη σε πολλαπλά μεγέθη viewport συσκευών παράλληλα — όλα σε μία οθόνη. Δείτε πώς φαίνεται το σχεδίασμά σας σε iPhone, iPad, τηλέφωνα Android, laptops και desktops ταυτόχρονα. Κυλήστε ένα viewport και όλα τα υπόλοιπα ακολουθούν, κάνοντας εύκολη τη σύγκριση της ίδιας ενότητας περιεχομένου σε κάθε μέγεθος συσκευής.
Η δοκιμή responsive σχεδίων παραδοσιακά σημαίνει αλλαγή μεγέθους παραθύρου browser ή χρήση της εργαλειοθήκης συσκευής DevTools για εναλλαγή μεταξύ μεγεθών viewport ένα-ένα. Αυτό λειτουργεί, αλλά μπορείτε να δείτε μόνο ένα μέγεθος τη φορά — καθιστώντας αδύνατη τη σύγκριση εμφάνισης ενότητας σε κινητό έναντι desktop ταυτόχρονα. Το Responsive Viewer λύνει αυτό αποδίδοντας τη σελίδα σε πολλαπλά viewports ταυτόχρονα, εμφανιζόμενα παράλληλα στην οθόνη σας. Επιλέξτε από προεπιλεγμένα προφίλ συσκευών (iPhone 15, iPad Pro, Pixel 8, MacBook, Desktop 1440p) ή εισάγετε προσαρμοσμένες διαστάσεις. Κάθε viewport είναι πλήρως αποδοσμένη εμφάνιση της σελίδας, όχι στατικό screenshot — κυλήστε ένα και όλα τα υπόλοιπα κυλούν στην ίδια θέση. Αυτή η συγχρονισμένη κύλιση σάς επιτρέπει να συγκρίνετε ακριβώς την ίδια περιοχή περιεχομένου σε όλα τα μεγέθη συσκευών.
Δείτε την τρέχουσα σελίδα αποδοσμένη ταυτόχρονα σε πολλαπλά μεγέθη viewport εμφανιζόμενα παράλληλα στην οθόνη σας. Συγκρίνετε διατάξεις κινητού, tablet και desktop με μια ματιά χωρίς εναλλαγή μεταξύ προβολών.
Επιλέξτε από βιβλιοθήκη δημοφιλών προεπιλογών συσκευών: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) και Full HD Desktop (1920×1080). Οι προεπιλογές ενημερώνονται με τρέχουσες διαστάσεις συσκευών.
Εισάγετε οποιοδήποτε προσαρμοσμένο πλάτος και ύψος για δοκιμή μη τυπικών μεγεθών viewport. Χρειάζεστε να ελέγξετε πώς φαίνεται η σελίδα στα ακριβώς 768px πλάτος; Απλά πληκτρολογήστε το. Μπορούν να προστεθούν πολλαπλά προσαρμοσμένα viewports μαζί με τις προεπιλογές.
Κυλήστε ένα viewport και όλα τα υπόλοιπα κυλούν στην ίδια κατακόρυφη θέση. Αυτό σάς επιτρέπει να συγκρίνετε ακριβώς την ίδια ενότητα περιεχομένου σε όλα τα μεγέθη συσκευών ταυτόχρονα — δείτε πώς αποδίδεται η περιοχή hero, ο πίνακας τιμολόγησης ή το footer σε κινητό, tablet και desktop.
Κάθε viewport εμφανίζεται μέσα σε ρεαλιστικό πλαίσιο συσκευής — bezels τηλεφώνου, περιγράμματα tablet, chrome laptop. Το οπτικό πλαίσιο βοηθά τους ενδιαφερόμενους να κατανοήσουν ποιο viewport αντιπροσωπεύει ποια συσκευή κατά τους ελέγχους.
Ενεργοποιήστε και απενεργοποιήστε μεμονωμένες συσκευές για εστίαση σε συγκεκριμένες συγκρίσεις μεγέθους. Συγκρίνετε μόνο κινητό και desktop; Αποεπιλέξτε τις προεπιλογές tablet. Χρειάζεστε να δείτε μόνο iPhones; Αποεπιλέξτε τα υπόλοιπα.
Μετά από υλοποίηση responsive σχεδίου, χρησιμοποιήστε το Responsive Viewer για επαλήθευση ότι κάθε ενότητα φαίνεται σωστά σε όλα τα μεγέθη συσκευών στόχου. Εντοπίστε υπέρβαση κειμένου, ζητήματα κλιμάκωσης εικόνων, προβλήματα σύμπτυξης πλοήγησης και ασυνέπειες αποστάσεων — όλα σε μία προβολή.
Δείξτε στους πελάτες πώς φαίνεται ο ιστότοπός τους σε συσκευές κατά τη διάρκεια συνάντησης ελέγχου. Η παράλληλη προβολή είναι αμέσως κατανοητή — δεν χρειάζεται εξήγηση εννοιών viewport. Οι πελάτες βλέπουν ταυτόχρονα κινητό, tablet και desktop.
Βλέπετε διάταξη να σπάει σε συγκεκριμένο πλάτος; Προσθέστε προσαρμοσμένο viewport στο ακριβές πλάτος pixel όπου εμφανίζεται το ζήτημα και συγκρίνετε το με ελαφρά ευρύτερα και στενότερα viewports για εντοπισμό του CSS breakpoint που προκαλεί το πρόβλημα.
Ελέγξτε αν οι μακριές επικεφαλίδες αναδιπλώνονται σωστά σε κινητό, αν οι πίνακες δεδομένων γίνονται με κύλιση σε μικρές οθόνες, αν τα πεδία φόρμας είναι αρκετά μεγάλα για αγγίξιμο και αν τα CTAs παραμένουν ορατά και προσβάσιμα.
Χρησιμοποιήστε την προβολή πολλαπλών συσκευών για δημιουργία ελκυστικών εικόνων παρουσίασης responsive σχεδίου. Λάβετε screenshot του Responsive Viewer που δείχνει το σχεδίασμά σας σε 3-4 μεγέθη συσκευών για παρουσιάσεις portfolio.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Responsive Viewer. Η σελίδα μεταβαίνει σε λειτουργία πολλαπλών viewport με πλαίσια συσκευών εμφανιζόμενα παράλληλα.
Η γραμμή συσκευών στην κορυφή δείχνει διαθέσιμες προεπιλογές (iPhone, iPad, Pixel, MacBook, Desktop). Κάντε κλικ σε συσκευές για εναλλαγή ενεργοποίησης/απενεργοποίησης. Οι επιλεγμένες συσκευές εμφανίζονται ως viewports παρακάτω.
Κάντε κλικ στο κουμπί Προσαρμοσμένο και εισάγετε συγκεκριμένες διαστάσεις πλάτους × ύψους για προσθήκη προσαρμοσμένου viewport. Χρήσιμο για δοκιμή ακριβών τιμών breakpoint όπως 768px, 1024px ή 1280px.
Κυλήστε οποιοδήποτε viewport — όλα τα υπόλοιπα ακολουθούν στην ίδια θέση. Συγκρίνετε πώς φαίνεται η ίδια ενότητα σε όλα τα επιλεγμένα μεγέθη συσκευών ταυτόχρονα.
Κάντε κλικ ξανά στο εικονίδιο Responsive Viewer ή στο κουμπί κλεισίματος για έξοδο από λειτουργία πολλαπλών viewport και επιστροφή στην κανονική προβολή μίας σελίδας.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
