Πώς να προβάλετε την έκδοση για φορητές συσκευές ενός ιστότοπου σε υπολογιστή

Εάν είστε προγραμματιστής ιστού ή είστε ιδιοκτήτης μιας διαδικτυακής επιχείρησης, μπορεί να είστε περίεργοι να μάθετε πώς φαίνεται ένας ιστότοπος για κινητά σε έναν υπολογιστή. Η εμφάνιση και η λειτουργικότητα του ιστότοπού σας για κινητά μπορεί να είναι καθοριστικής σημασίας, καθώς περισσότερο από το ήμισυ της επισκεψιμότητας στο Διαδίκτυο προέρχεται από τηλέφωνα. Οι πελάτες είναι πιο πιθανό να παραμείνουν σε έναν ιστότοπο περισσότερο ή να αγοράσουν κάτι εάν είναι οπτικά ελκυστικό. Μια προβολή επιφάνειας εργασίας θα μπορούσε επίσης να σας βοηθήσει να κάνετε αλλαγές και να διορθώσετε πιθανά προβλήματα νωρίτερα.

Ευτυχώς, αυτή είναι μια σχετικά απλή διαδικασία. Σε αυτό το άρθρο, θα σας δείξουμε πώς να προβάλλετε μια έκδοση για κινητά ενός ιστότοπου σε διαφορετικές συσκευές και προγράμματα περιήγησης.

Πώς να προβάλετε την έκδοση για κινητά ενός ιστότοπου στο Chrome σε Mac

Στο Chrome, μπορείτε να δοκιμάσετε τη διεπαφή και να δείτε εάν όλα τα στοιχεία του ιστότοπου λειτουργούν σωστά χρησιμοποιώντας ένα ενσωματωμένο εργαλείο προγραμματιστή που ονομάζεται DevTools. Επειδή παρέχει προκαθορισμένες επιλογές συσκευών, το DevTools είναι ο καλύτερος τρόπος για τον προγραμματιστή να μεταφέρει γρήγορα την προβολή από επιτραπέζιο υπολογιστή σε κινητό και αντίστροφα χωρίς επεκτάσεις προγραμματιστή.

Μπορείτε επίσης να αλλάξετε το μέγεθος οθόνης για να ταιριάζει στις ανάγκες σας και να προσαρμόσετε το πλάτος και το ύψος της οθόνης για να δείτε πώς θα φαίνεται ο ιστότοπός σας σε διαφορετικά μεγέθη οθόνης. Για να το κάνετε αυτό σε Mac, ακολουθήστε τα εξής βήματα:

1. Εκκινήστε το πρόγραμμα περιήγησης Google Chrome και μεταβείτε στον ιστότοπο που θέλετε να προβάλετε.
   
2. Πατήστε F12 στο πληκτρολόγιό σας για να αποκτήσετε πρόσβαση στο DevTools.
   
3. Όταν η λειτουργία είναι ενεργοποιημένη, κάντε κλικ στο εικονίδιο Εναλλαγή εξομοίωσης συσκευής.
   
4. Μπορείτε να επιλέξετε από μια λίστα συσκευών iOS και Android για να τις μιμηθείτε.
   
5. Θα εμφανίσει τον ιστότοπο στη φόρμα για κινητά που έχετε επιλέξει.
   

Όταν τελειώσετε, απλώς κλείστε το παράθυρο εργαλείων προγραμματιστή για να κλείσετε την έκδοση του ιστότοπου για κινητά.

Πώς να προβάλετε την έκδοση για φορητές συσκευές ενός ιστότοπου στο Chrome σε υπολογιστή με Windows

Εάν θέλετε να προβάλετε μια έκδοση για φορητές συσκευές ενός ιστότοπου σε υπολογιστή Windows στο Chrome, είναι μια παρόμοια διαδικασία:

1. Ανοίξτε το πρόγραμμα περιήγησης Chrome.
   
2. Στο Chrome, μεταβείτε στον ιστότοπο που θέλετε να δείτε στην έκδοση για κινητά.
3. Κάντε δεξί κλικ στην ιστοσελίδα και επιλέξτε Επιθεώρηση από το μενού.
   
4. Για να μεταβείτε στα Εργαλεία προγραμματιστή, κάντε κλικ στην καρτέλα Περισσότερα εργαλεία και επιλέξτε Εργαλεία προγραμματιστή ή πατήστε F12 για να ανοίξετε τα Εργαλεία προγραμματιστή.
   
5. Θα ανοίξει το παράθυρο Εργαλεία προγραμματιστή.
6. Κάντε κλικ στο εικονίδιο εναλλαγής συσκευής για να μεταβείτε στη λειτουργία προβολής ιστότοπου για κινητά.
   
7. Επιλέξτε την κινητή συσκευή που θέλετε να προσομοιώσετε (προαιρετικό).
   
8. Τώρα μπορείτε να τροποποιήσετε τις διαστάσεις της οθόνης ώστε να ταιριάζουν στις ανάγκες σας.

Πώς να προβάλετε την έκδοση για κινητά ενός ιστότοπου στο Chrome σε ένα Chromebook

Η πρόσβαση στην έκδοση για κινητά ενός ιστότοπου στο Chrome χρησιμοποιώντας ένα Chromebook μοιάζει πολύ με τις δύο πρώτες μεθόδους.

1. Ανοίξτε το πρόγραμμα περιήγησης Google Chrome.
   
2. Ανοίξτε την ιστοσελίδα στην οποία θέλετε να αποκτήσετε πρόσβαση στην κινητή συσκευή σας.
   
3. Για πρόσβαση στο μενού, κάντε κλικ στο εικονίδιο με τις τρεις κάθετες κουκκίδες.
   
4. Σύρετε το ποντίκι σας πάνω από το στοιχείο Περισσότερα εργαλεία στη λίστα.
   
5. Επιλέξτε Εργαλεία προγραμματιστή.
   
6. Θα ανοίξει το παράθυρο Εργαλεία προγραμματιστή στο πρόγραμμα περιήγησης.
   
7. Ενεργοποιήστε τη λειτουργία προβολής ιστότοπου για κινητά κάνοντας κλικ στο εικονίδιο εναλλαγής συσκευής.
   

Αυτό θα εμφανίσει τη διεπαφή χρήστη για τον ιστότοπο για κινητά. Μπορείτε επίσης να επιλέξετε την προτιμώμενη εμπειρία συσκευής επιλέγοντας τη μάρκα και το μοντέλο από το αναπτυσσόμενο πλαίσιο. Η ιστοσελίδα θα ανανεώνεται ως ιστότοπος για επιτραπέζιους υπολογιστές κάθε φορά που κλείνετε την κονσόλα εργαλείων προγραμματιστή.

Πώς να προβάλετε την έκδοση για φορητές συσκευές ενός ιστότοπου στον Firefox σε Mac

Μπορείτε να χρησιμοποιήσετε άλλα προγράμματα περιήγησης ιστού όπως το Firefox για να προβάλετε έναν ιστότοπο για κινητά σε υπολογιστή Mac. Η αλλαγή μεγέθους του παραθύρου του προγράμματος περιήγησης είναι μία από τις μεθόδους που χρησιμοποιούν οι περισσότεροι προγραμματιστές ιστού για να αξιολογήσουν τον ιστότοπο με ανταπόκριση σχεδιασμού. Ωστόσο, τις περισσότερες φορές, αυτή η εναλλακτική δεν φαίνεται αποδεκτή.

Εκεί είναι χρήσιμες οι δυνατότητες ανάπτυξης ιστού του προγράμματος περιήγησης Firefox. Μπορείτε να περιηγηθείτε στις ιστοσελίδες σας σε πολλές αναλύσεις, εάν γνωρίζετε πώς να έχετε πρόσβαση σε εκδόσεις ιστοτόπων για φορητές συσκευές στον Firefox. Ακολουθήστε αυτά τα βήματα:

1. Ανοίξτε την έκδοση για κινητά του ιστότοπου που θέλετε να δείτε.
2. Κάντε δεξί κλικ στην ιστοσελίδα και επιλέξτε την επιλογή Inspect από το μενού.
   
3. Επιλέξτε τη λειτουργία Responsive Design Mode.
   
4. Επιλέξτε το μέγεθος οθόνης του ιστότοπου.
   

Πώς να προβάλετε την έκδοση για φορητές συσκευές ενός ιστότοπου στον Firefox σε υπολογιστή με Windows

Οι υπολογιστές με Windows έχουν επίσης την επιλογή προβολής εκδόσεων ιστοτόπων για φορητές συσκευές χρησιμοποιώντας Firefox. Δείτε πώς να το κάνετε:

1. Ξεκινήστε τον Firefox στον υπολογιστή σας.
   
2. Μεταβείτε στον ιστότοπο που θέλετε να δείτε ως έκδοση για κινητά.
   
3. Μεταβείτε στις Ρυθμίσεις κάνοντας κλικ στο οριζόντιο εικονίδιο με τις τρεις γραμμές.
   
4. Θα δείτε ένα αναπτυσσόμενο μενού όπου θα πρέπει να επιλέξετε μια επιλογή προγραμματιστή Ιστού.
   
5. Επιλέξτε Responsive Design Mode.
   
6. Τέλος, μπορείτε να επιλέξετε ένα μοντέλο smartphone για να δείτε πώς θα εμφανίζεται ο ιστότοπός σας σε αυτήν τη συσκευή.
   

Πώς να προβάλετε την έκδοση για φορητές συσκευές ενός ιστότοπου στο Safari σε Mac

Έχουμε καλύψει τον τρόπο προβολής ενός ιστότοπου για κινητές συσκευές σε επιτραπέζιο υπολογιστή χρησιμοποιώντας Chrome και Firefox. Τι γίνεται όμως με το προεπιλεγμένο πρόγραμμα περιήγησης που συνοδεύει συσκευές Mac, το Safari; Ευτυχώς, είναι δυνατή η προβολή μιας έκδοσης για κινητά ενός ιστότοπου και στο Safari.

1. Εκκινήστε το πρόγραμμα περιήγησης Safari.
   
2. Μεταβείτε στον ιστότοπο που θέλετε να προβάλετε ως έκδοση για κινητά.
   
3. Κάντε κλικ στις Επιλογές και μετά στο μενού Ανάπτυξη.
   
4. Από το αναπτυσσόμενο μενού, επιλέξτε Enter Responsive Design Mode.
   
5. Τώρα μπορείτε να δείτε την έκδοση για κινητά του ιστότοπου.
   

Πρόσθετες συχνές ερωτήσεις

Μπορώ να δω την έκδοση για υπολογιστές ενός ιστότοπου στο τηλέφωνό μου;

Η απάντηση είναι ναι! Μπορείτε να μεταβείτε από την έκδοση για κινητά στην έκδοση για επιτραπέζιους υπολογιστές για να την ελέγξετε χωρίς να χρησιμοποιήσετε υπολογιστή. Τα βήματα για τη μετατόπιση της έκδοσης για κινητά στην έκδοση για υπολογιστές στο Chrome είναι τα εξής:

1. Μεταβείτε στον ιστότοπο που θέλετε να δείτε σε προβολή επιφάνειας εργασίας.

2. Πατήστε στο εικονίδιο με τις τρεις κουκκίδες για πρόσβαση στο μενού.

3. Επιλέξτε τώρα την επιλογή Desktop View.

Λάβετε υπόψη ότι αυτά τα βήματα μπορεί να διαφέρουν ανάλογα με το τηλέφωνο που χρησιμοποιείτε.

πώς να ελέγξετε εάν μια θύρα είναι ανοιχτή

Κάνοντας ευκολότερο το σχεδιασμό ιστοσελίδων για φορητές συσκευές

Τα εργαλεία προγραμματιστή είναι εξαιρετικά για την ανάλυση και την τροποποίηση μιας έκδοσης για κινητά ενός ιστότοπου σε επιτραπέζιο υπολογιστή χωρίς εναλλαγή συσκευών. Μπορείτε να αλλάξετε το μέγεθος της οθόνης για να παρατηρήσετε πώς λειτουργούν τα στοιχεία σε διάφορες συσκευές. Μπορείτε να προσαρμόσετε διαφορετικά στοιχεία και να δημιουργήσετε τον ιστότοπο για πολλά μεγέθη οθόνης χρησιμοποιώντας τη λειτουργία απόκρισης.

Κατά το σχεδιασμό ενός ιστότοπου, ο σχεδιαστής πρέπει πάντα να έχει υπόψη του πώς εμφανίζεται η διεπαφή του ιστότοπου σε τηλέφωνα, tablet και επιτραπέζιους υπολογιστές. Η χρήση των μεθόδων που περιγράφονται στο άρθρο μπορεί επίσης να βοηθήσει τον προγραμματιστή να το κάνει και επίσης να εντοπίσει ποια στοιχεία ενός ιστότοπου δημιουργούν προβλήματα για να τα διορθώσουν.

Έχετε δοκιμάσει ποτέ να προβάλετε μια έκδοση για κινητά ενός ιστότοπου στον υπολογιστή σας; Ποιο πρόγραμμα περιήγησης προτιμάτε να χρησιμοποιήσετε για να το κάνετε αυτό; Ενημερώστε μας στην παρακάτω ενότητα σχολίων.