Responsive Web Design Viewport
Πίνακας περιεχομένων
Τι είναι το Viewport;
Η θύρα προβολής είναι η ορατή περιοχή μιας ιστοσελίδας από τον χρήστη.
Η θύρα προβολής διαφέρει ανάλογα με τη συσκευή και θα είναι μικρότερη σε ένα κινητό τηλέφωνο από ό,τι στην οθόνη ενός υπολογιστή.
Πριν από τα tablet και τα κινητά τηλέφωνα, οι ιστοσελίδες σχεδιάζονταν μόνο για οθόνες υπολογιστών και ήταν συνηθισμένο ιστοσελίδες να έχουν στατικό σχεδιασμό και σταθερό μέγεθος.
Στη συνέχεια, όταν αρχίσαμε να σερφάρουμε στο διαδίκτυο χρησιμοποιώντας tablet και κινητά τηλέφωνα, διορθώθηκε Οι ιστοσελίδες μεγέθους ήταν πολύ μεγάλες για να χωρέσουν στη θύρα προβολής. Για να διορθωθεί αυτό, τα προγράμματα περιήγησης σε αυτές τις συσκευές μείωσαν ολόκληρη την ιστοσελίδα ώστε να ταιριάζει στην οθόνη.
Αυτό δεν ήταν τέλειο!! Αλλά μια γρήγορη λύση.
Ρύθμιση της θύρας προβολής
Η HTML5 εισήγαγε μια μέθοδο που επιτρέπει στους σχεδιαστές ιστού να αναλάβουν τον έλεγχο της θύρας προβολής, μέσω του ετικέτα .
Θα πρέπει να συμπεριλάβετε το ακόλουθο στοιχείο θύρας προβολής σε όλες τις ιστοσελίδες σας:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Αυτό δίνει στο πρόγραμμα περιήγησης οδηγίες για το πώς για να ελέγξετε τις διαστάσεις και την κλιμάκωση της σελίδας.
Το τμήμα width=device-width ορίζει το πλάτος της σελίδας ώστε να ακολουθεί το πλάτος οθόνης της συσκευής (το οποίο θα διαφέρει ανάλογα με τη συσκευή).
Το τμήμα initial-scale=1.0 ορίζει το αρχικό επίπεδο ζουμ όταν η σελίδα φορτώνεται για πρώτη φορά από το πρόγραμμα περιήγησης.
Ακολουθεί ένα παράδειγμα ιστοσελίδας χωρίς τη μετα-ετικέτα θύρας προβολής και η ίδια ιστοσελίδα με τη μετα-ετικέτα θύρας προβολής:
Συμβουλή: Εάν περιηγείστε σε αυτήν τη σελίδα με τηλέφωνο ή tablet, μπορείτε να κάνετε κλικ στους δύο παραπάνω συνδέσμους για να δείτε τη διαφορά.
Μέγεθος περιεχομένου στη θύρα προβολής
Οι χρήστες χρησιμοποιούνται για κάθετη κύλιση ιστότοπων τόσο σε επιτραπέζιους υπολογιστές όσο και σε κινητά συσκευές - αλλά όχι οριζόντια!
Έτσι, εάν ο χρήστης αναγκαστεί να κάνει κύλιση οριζόντια ή σμίκρυνση, για να δει το ολόκληρη η ιστοσελίδα οδηγεί σε κακή εμπειρία χρήστη.
Μερικοί επιπλέον κανόνες που πρέπει να ακολουθήσετε:
1. ΜΗΝ χρησιμοποιείτε στοιχεία μεγάλου σταθερού πλάτους - Για παράδειγμα, αν μια εικόνα εμφανίζεται σε πλάτος μεγαλύτερο από το παράθυρο προβολής που μπορεί να προκαλέσει θύρα προβολής για οριζόντια κύλιση. Θυμηθείτε να προσαρμόσετε αυτό το περιεχόμενο ώστε να ταιριάζει το πλάτος της θύρας προβολής.
2. ΜΗΝ αφήνετε το περιεχόμενο να βασίζεται σε ένα συγκεκριμένο πλάτος θύρας προβολής render well- Επειδή οι διαστάσεις και το πλάτος της οθόνης σε pixel CSS ποικίλλουν Σε μεγάλο βαθμό μεταξύ συσκευών, το περιεχόμενο δεν πρέπει να βασίζεται σε ένα συγκεκριμένο πλάτος θύρας προβολής να αποδώσει καλά.
3. Χρησιμοποιήστε ερωτήματα μέσων CSS για να εφαρμόσετε διαφορετικό στυλ για μικρά και μεγάλες οθόνες- Ορισμός μεγάλων απόλυτων πλάτη CSS για στοιχεία σελίδας θα προκαλέσει το στοιχείο να είναι πολύ πλατύ για τη θύρα προβολής σε μια μικρότερη συσκευή. Αντίθετα, σκεφτείτε να χρησιμοποιήσετε τιμές σχετικού πλάτους, όπως πλάτος: 100%. Επίσης, να είσαι προσέχετε να χρησιμοποιείτε μεγάλες απόλυτες τιμές τοποθέτησης. Μπορεί να προκαλέσει το στοιχείο να πέσει έξω από το παράθυρο προβολής σε μικρές συσκευές.