Μια από τις βασικές έννοιες σε οποιοδήποτε σχέδιο που ανταποκρίνεται είναι η αλλαγή του μεγέθους του παραθύρου προβολής. Αυτό οφείλεται στο γεγονός ότι τα παράθυρα προβολής για κινητά ποικίλλουν σημαντικά από τα παράθυρα προβολής της επιφάνειας εργασίας. Για να ελέγξουμε το μέγεθος του παραθύρου προβολής, χρησιμοποιούμε παραδοσιακά τη μετα-ετικέτα viewport.
Ωστόσο, η μετα-ετικέτα παραθύρου προβολής, όπως όλες οι χειρότερες εξελίξεις των τελευταίων για το πρόγραμμα περιήγησης, δεν είναι έγκυρη για το W3C. Εισήχθη αρχικά από την Apple στο Safari και από τότε έχει υιοθετηθεί από άλλα προγράμματα περιήγησης. Αυτό έχει ως αποτέλεσμα μια ασυνεπή εφαρμογή.
Ευτυχώς, το W3C έχει επιτύχει στη διάθεσή μας για άλλη μια φορά εισάγοντας τον κανόνα @viewport CSS.
Χρησιμοποιώντας την παλιά προσέγγιση meta tag, θα μπορούσαμε να πούμε στο πρόγραμμα περιήγησης σε ποιο μέγεθος θα πρέπει να θεωρείται το παράθυρο προβολής ως:
Εκτός από το αν είναι άκυρο, η εντολή προβολής δεν είναι δεδομένα, είναι παρουσίαση. Συνεπώς, παραμένοντας στις αρχές μας για τον διαχωρισμό των δεδομένων και της παρουσίασης, η οδηγία για την προβολή πρέπει να είναι CSS και όχι HTML.
Η λύση W3C στο CSS μοιάζει με αυτό:
@viewport {width: device-width;}Ή εναλλακτικά, μπορείτε να ορίσετε το παράθυρο προβολής με έναν αριθμό, όπως έτσι:
@viewport {width: 640px;}Μπορείτε να χρησιμοποιήσετε τον κανόνα @viewport σε συνδυασμό με τα ερωτήματα @media για να εξαναγκάσετε οποιοδήποτε θύρα προβολής μεγαλύτερο από 960 να συρρικνωθεί σε 960ppx, όπως π.χ.:
@media screen and (min-width: 960px){@viewport {width: 960px;}}Ο κανόνας @viewport μας επιτρέπει επίσης να ζουμ σε μια σελίδα από προεπιλογή και ακόμη και να ρυθμίσουμε το μέγιστο ζουμ:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Είναι δυνατό να αποκλείσετε το ζουμ συνολικά θέτοντας την ιδιότητα μεγέθυνσης χρήστη σε σταθερό. Ωστόσο, η μεγέθυνση, ειδικά στα smartphones, είναι απαραίτητη για την προσβασιμότητα και θα συνιστούσα να χρησιμοποιήσετε αυτήν την ιδιότητα.
Μια ακόμη πολύ χρήσιμη ιδιότητα μας επιτρέπει να κλειδώσετε την ιστοσελίδα μας σε λειτουργία τοπίου ή πορτραίτου:
@viewport {orientation: landscape;}Εδώ είναι τα κακά νέα: αυτή τη στιγμή ο κανόνας αυτός υποστηρίζεται μόνο από τον Internet Explorer 10 και την Opera και απαιτεί τα προθέματα -ms- και -o-browser αντίστοιχα.
Ενώ αυτό είναι απογοητευτικό να πούμε το λιγότερο, το γεγονός ότι η λειτουργικότητα της προβολής είναι ήδη διαθέσιμη στα περισσότερα προγράμματα περιήγησης θα πρέπει να σημαίνει ότι πρόκειται για έναν απλό κανόνα για την ανάληψη. Ας ελπίσουμε ότι θα αρχίσουμε να βλέπουμε ότι εισήχθη σε νυχτερινές κατασκευές πολύ σύντομα.
Σας ενδιαφέρει η συμμόρφωση με τα πρότυπα; Το W3C συμβάλλει ή εμποδίζει την πρόοδο στον ιστό; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα παραθύρου μέσω των φωτογραφιών LostBob