Πώς να χρησιμοποιήσετε ένα browser από τους Chrome, Firefox, Edge και Opera σε desktop, για να εξομοιώσετε την εμφάνιση μίας ιστοσελίδας από ένα κινητό τηλέφωνο.
Αν θέλετε να δοκιμάσετε την εμφάνιση και την λειτουργικότητα της ιστοσελίδα σας σε διάφορα κινητά τηλέφωνα, τότε λόγω της πληθώρας συσκευών θα πρέπει ξοδέψετε μία περιουσία για να αγοράσετε όλα τα κινητά που κυκλοφορούν. Και επειδή τα κινητά τηλέφωνα είναι διαφορετικά τόσο ως προς διαστάσεις της οθόνης τους όσο και ως προς την ανάλυσή της, αν έχετε ελέγξει την ιστοσελίδα σας σε ένα μόνο κινητό τηλέφωνο, αυτό δεν σημαίνει ότι όλα τα άλλα θα τη δείχνουν με τον ίδιο τρόπο.
Συνυπολογίστε ότι υπάρχουν και tablets και laptops με ένα σωρό διαστάσεις οθονών. Η λύση για να δείτε πως εμφανίζεται και αν λειτουργεί σωστά η ιστοσελίδα σας σε όλες αυτές τις συσκευές, είναι να τις δοκιμάσετε μία προς μία, αλλά σε ένα εξομοιωτή. Υπάρχουν προγράμματα που κάνουν αυτήν την δουλειά, όπως το LT Browser που παρουσιάσαμε πρόσφατα, αλλά μπορείτε κάλλιστα να χρησιμοποιήσετε και τον κανονικό browswer σας.
Αν λοιπόν έχετε μία ιστοσελίδα ή είστε απλά προγραμματιστής ιστού δείτε πώς μπορείτε να αποκτήσετε πρόσβαση στον υπάρχον εξομοιωτή κινητών τηλεφώνων των προγραμμάτων περιήγησης Google Chrome, Mozilla Firefox, Microsoft Edge και Opera.
Α. Google Chrome
Α.1. Ανοίξτε το Chrome και μεταβείτε στον ιστότοπο που θέλετε να δοκιμάσετε.
Α.2. Πατήστε ταυτόχρονα τα πλήκτρα CTRL + SHIFT + I στο πληκτρολόγιό σας για να μπείτε στα Εργαλεία προγραμματιστών.
Εναλλακτικά κάντε κλικ στις τρεις κάθετες τελίτσες που βρίσκονται πάνω δεξιά στην μπάρα διευθύνσεων και από εκεί πλοηγηθείτε στο “Περισσότερα εργαλεία > Εργαλεία για προγραμματιστές”
Α.3. Για αυτές του είδους τις δοκιμές προτιμήστε να έχετε το παράθυρο των προγραμματιστών στα δεξιά του Browser ενώ στα αριστερά να βλέπετε την ιστοσελίδα. Πατώντας ταυτόχρονα τα πλήκτρα CTRL + Shift + M στο πληκτρολόγιό σας γυρνάτε σε εμφάνιση desktop και αν το ξαναπατήσετε σε εμφάνιση κινητού. Εναλλακτικά των πλήκτρων CTRL + Shift + M είναι το κουμπί “Toggle device toolbar” (Εναλλαγή γραμμής εργαλείων συσκευής) που βρίσκεται πάνω αριστερά στο μενού του παράθυρου των προγραμματιστών και μοιάζει με smartphone δίπλα σε tablet.
Α.4. Στην θέση του CTRL + Shift + M που εμφανίζεται η ιστοσελίδα σας σαν κινητό τηλέφωνο, από προεπιλογή, η γραμμή εργαλείων του εξομοιωτή χρησιμοποιεί ένα Responsive πρότυπο. Κάντε κλικ σε αυτό και επιλέξτε την κινητή συσκευή που θέλετε να μιμηθείτε. Οι επιλογές σας περιλαμβάνουν πολλά iPhone, iPad, Surface Duo, δύο συσκευές Samsung Galaxy και έναν προσομοιωτή προγράμματος περιήγησης για κινητά Moto G4. Εναλλακτικά μπορείτε να παίξετε με την οριζόντια διάστασης της οθόνης κάνοντας κλικ στα διάφορα σημεία της μπάρας που βρίσκεται κάτω από το μενού των κινητών.
Επιπλέον μπορείτε να πατήσετε το “Rotate” για να προσομοιάσετε ένα κινητό που περιστρέφεται κατά 90 μοίρες.
Α.5. Πλοηγηθείτε στον ιστότοπο που θέλετε να δοκιμάσετε, κάντε εναλλαγή μεταξύ των διαφόρων smartphone και tablet και δείτε πώς φαίνεται. Πατώντας “Edit” μπορείτε να τροποποιήσετε την λίστα με τα προσφερόμενα κινητά και tablets. Όταν τελειώσετε, πατήστε το κουμπί X (Κλείσιμο) στην επάνω δεξιά γωνία των εργαλείων προγραμματιστή του Google Chrome για να επιστρέψετε στην τυπική λειτουργία περιήγησης στην επιφάνεια εργασίας.
Β. Mozilla Firefox
Β.1. Στο Mozilla Firefox, ανοίξτε τον ιστότοπο για τον οποίο θέλετε να ελέγξετε. Στη συνέχεια, πατήστε ταυτόχρονα τα πλήκτρα CTRL + Shift + M στο πληκτρολόγιό σας ή εναλλακτικά κάντε κλικ στο κουμπί burger στην επάνω δεξιά γωνία για να ανοίξετε το μενού του Firefox και επιλέξτε “Προγραμματισμός ιστού > Λειτ. Αποκρίσιμου σχεδι..” (η μετάφραση του Fifefox στις εντολές του είναι για κλάματα)
Β.2. Βλέπετε ένα μενού γεμάτο με εργαλεία που είναι χρήσιμα για προγραμματιστές ιστού. Ο Firefox επιτρέπει τη λειτουργία Responsive Design. Στο επάνω μέρος του παραθύρου, βλέπετε τις παραμέτρους που χρησιμοποιούνται από αυτήν τη λειτουργία εξομοίωσης. Εάν δεν έχει επιλεγεί συσκευή, κάντε κλικ ή πατήστε στο Αποκρίσιμο (Responsive) για να ανοίξετε μια αναπτυσσόμενη λίστα με συσκευές διαθέσιμες για προσομοίωση και, στη συνέχεια, επιλέξτε αυτήν που θέλετε να προσομοιώσετε.
Μπορείτε να προσομοιώσετε το πρόγραμμα περιήγησης για πολλά iPhone, το iPad, το Kindle Fire (το Firefox είναι το μόνο πρόγραμμα περιήγησης που προσφέρει αυτήν την επιλογή εξομοίωσης) και συσκευές Samsung Galaxy S9.
Β.3. Μπορείτε να πατήσετε το “Επεξεργασία λίστας” για να δείτε και άλλες συσκευές που μπορείτε να δοκιμάσετε. Επίσης ο εξομοιωτής σας δίνει την δυνατότητα περιστροφής της οθόνης, λειτουργία οθόνης αφής, να ορίσετε την δική σας διάσταση οθόνης, και τέλος την ποιότητα σύνδεσης με το διαδίκτυο.
Β.4. Όταν ολοκληρώσετε τις δοκιμές με τον εξομοιωτή του προγράμματος περιήγησης, πατήστε το κουμπί X (Λειτουργία κλεισίματος απόκρισης) στην επάνω δεξιά γωνία του Mozilla Firefox και θα επιστρέψετε στην τυπική λειτουργία περιήγησης στην επιφάνεια εργασίας.
Γ. Microsoft Edge
Γ.1.Το Microsoft Edge χρησιμοποιεί την ίδια μηχανή με το Google Chrome και προσφέρει τους ίδιους εξομοιωτές κινητών τηλεφώνων. Για να αποκτήσετε πρόσβαση σε αυτούς, επισκεφθείτε τον ιστότοπο που θέλετε να δοκιμάσετε και είτε πατήστε τα πλήκτρα CTRL + SHIFT + I στο πληκτρολόγιό σας είτε κάντε κλικ στις τρεις οριζόντιες κουκκίδες ( “Ρυθμίσεις και πολλά άλλα” ) στην επάνω δεξιά γωνία του Microsoft Edge. Στο μενού που εμφανίζεται, μεταβείτε στα “Περισσότερα εργαλεία > Εργαλεία προγραμματισμού”.
Γ.2. Κάντε κλικ στο κουμπί “Toggle device emulation” (μοιάζει με smartphone δίπλα σε tablet) ή πατήστε CTRL + Shift + M στο πληκτρολόγιό σας. Αυτό ενεργοποιεί τη γραμμή εργαλείων εξομοιωτή κινητών τηλεφώνων.
Γ.3. Από προεπιλογή, χρησιμοποιεί ένα Responsive πρότυπο για τον ιστότοπο που έχετε τοποθετήσει. Κάντε κλικ σε αυτό και επιλέξτε την κινητή συσκευή που θέλετε να μιμηθείτε. Οι επιλογές σας περιλαμβάνουν τα ίδια smartphone και tablet με το Google Chrome.
Γ.4. Έχετε τις ίδιες δυνατότητες με το Chrome. Δηλαδή μπορείτε να αλλάξετε το μέγεθος της οθόνης, να την περιστρέψετε κατά 90 μοίρες, να ρυθμίσετε την ποιότητα της σύνδεσης του internet. Περιηγηθείτε στον ιστότοπο που θέλετε να δοκιμάσετε, αλλάξτε μεταξύ των διαφόρων κινητών συσκευών και δείτε πώς φαίνεται. Όταν τελειώσετε, πατήστε το κουμπί X (Κλείσιμο) στην επάνω δεξιά γωνία του Microsoft Edge, για να επιστρέψετε στην τυπική λειτουργία περιήγησης στην επιφάνεια εργασίας.
Δ. Opera
Δ.1. Στο Opera, επισκεφθείτε την ιστοσελίδα που θέλετε να προβάλετε σαν να χρησιμοποιείτε m;ia φορητή συσκευή. Στη συνέχεια, κάντε κλικ στο εικονίδιο Opera επάνω αριστερά ( “Τροποποίηση και έλεγχος του Opera” ). Στο μενού που ανοίγει, επιλέξτε “Προγραμματιστής > Εργαλεία για προγραμματιστές”. Εάν προτιμάτε το πληκτρολόγιο, πατήστε ταυτόχρονα τα πλήκτρα CTRL + Shift + I για το ίδιο αποτέλεσμα.
Δ.2. Τα εργαλεία προγραμματιστή εμφανίζονται στη δεξιά πλευρά του παραθύρου του προγράμματος περιήγησης. Κάντε κλικ στο κουμπί “Toggle device toolbar” (μοιάζει με smartphone δίπλα σε tablet) ή πατήστε CTRL + Shift + M στο πληκτρολόγιό σας.
Δ.3. Από προεπιλογή, χρησιμοποιεί ένα Responsive πρότυπο που ταιριάζει με το ιστότοπο που έχετε τοποθετήσει. Κάντε κλικ σε αυτό και επιλέξτε την κινητή συσκευή που θέλετε να μιμηθείτε από τη λίστα επιλογών. Το Opera προσφέρει τους ίδιους εξομοιωτές για κινητά με το Google Chrome και το Microsoft Edge, καθώς βασίζεται στον ίδιο μηχανισμό (Chromium).
Δ.4. Έχετε τις ίδιες επιπρόσθετες δυνατότητες με το Chrome και το Edge. Όταν ολοκληρώσετε τη δοκιμή, πατήστε το κουμπί X (Κλείσιμο) στην επάνω δεξιά γωνία για να επιστρέψετε στην τυπική λειτουργία περιήγησης στην επιφάνεια εργασίας.
Συμπέρασμα
Τώρα ξέρετε πώς να μιμηθείτε όλα τα είδη κινητών συσκευών στο αγαπημένο σας πρόγραμμα περιήγησης ιστού. Ωστόσο, μπορεί να παρατηρήσετε ότι τα περισσότερα προγράμματα περιήγησης ιστού προσφέρουν τις ίδιες επιλογές εξομοίωσης, που συνήθως είναι iPhone και iPad. Εάν θέλετε να μιμηθείτε ένα σύγχρονο smartphone ή tablet Android, οι πιθανότητές σας είναι πολύ μικρές, ακόμη και στο Google Chrome (το πρόγραμμα περιήγησης που αναπτύχθηκε από την εταιρεία πίσω από το Android). Εάν θέλετε τα καλύτερα αποτελέσματα, ίσως χρειαστεί να χρησιμοποιήσετε δύο προγράμματα περιήγησης για αυτήν την εργασία: Chrome και Firefox ή Firefox και Edge ή Opera.
