Καλησπέρα, ή μάλλον βράδυ, αγαπητοί φίλοι. Μόλις πριν από λίγα λεπτά, ήμουν στη διαδικασία να προσθέσω μερικά μαγιό στο πρότυπο. Το πρότυπο ήταν μη προσαρμοστικό και το πρόβλημα ήταν στη δομή του, έκρυβε μέρος του περιεχομένου (υπήρχε ανάγκη για αυτό) και κατά την είσοδο από πρόγραμμα περιήγησης κινητού (από τηλέφωνο ή tablet), τόσο το περιεχόμενο όσο και ένα κομμάτι της σελίδας κόπηκαν. Προσπάθησα να διορθώσω αυτή την παρεξήγηση και κατά τη διάρκεια των «δοκιμών πεδίου στην πράξη» το κατάλαβα Η καλύτερη απόφασηείναι η χρήση της μετα-ετικέτας θύρας προβολής.
Η ετικέτα προορίζεται για τη σωστή κλιμάκωση του ιστότοπου διάφορες συσκευές, για παράδειγμα, σε συσκευές όπου η ανάλυση οθόνης είναι μικρότερη από την απαραίτητη. Χρησιμοποιήστε συχνά την ετικέτα προσαρμοστικά πρότυπα, αλλά λίγοι γνωρίζουν ότι μπορεί να είναι χρήσιμο σε συνηθισμένα σχέδια που δεν ανταποκρίνονται.
Ας δούμε τους πιθανούς κανόνες για τη χρήση της ετικέτας:
1. Πλάτος
Με αυτό υποδεικνύουμε έναν ακέραιο αριθμό σε pixel (από 200px έως 10000px) ή "πλάτος συσκευής". Αυτό ορίζει το πλάτος της θύρας προβολής, εάν το πλάτος δεν έχει καθοριστεί για εσάς, τότε λαμβάνεται αυτόματα:
- 980px - για κινητό Safari
- 850 px - Opera
- 800px - Android WebKit
- 974 εικονοστοιχεία - IE
2.Ύψος
Λειτουργεί με την ίδια αρχή όπως πλάτος. Ωστόσο, συχνά στο 99% των περιπτώσεων απλά δεν χρησιμοποιείται, επομένως δεν μπορείτε να το εκθέσετε εάν δεν ξέρετε αν το χρειάζεστε ή όχι. Τέλος πάντων, μπορείς να πειραματιστείς με αυτό...
3. Αρχική κλίμακα
Αυτή η παράμετρος ορίζει την κλίμακα της σελίδας. Όλα είναι στοιχειώδη εδώ, αυξήστε την αξία - αυξήστε την κλίμακα. Οι ακόλουθες τιμές είναι διαθέσιμες για αυτό, από 0,1 έως 10. Εάν το ορίσετε σε 1,0, τότε θα υποδείξουμε ότι η σελίδα δεν έχει κλιμακωθεί.
4. Με δυνατότητα κλιμάκωσης από το χρήστη
Καθορίζει εάν η κλίμακα σελίδας μπορεί να αλλάξει. Μπορεί να κληρονομήσει αξίες Ναίή όχι. Στο πρόγραμμα περιήγησης Safari, η προεπιλεγμένη τιμή είναι Ναί,
5. Ελάχιστη κλίμακακαι μέγιστης κλίμακας
Αυτές οι επιλογές ορίζουν τις ελάχιστες και μέγιστες επιτρεπόμενες κλίμακες για τη μετα-ετικέτα της θύρας προβολής. Οι διαθέσιμες τιμές για αυτό είναι από 0,1 έως 10. Εάν το ορίσετε σε 1,0, τότε θα ενημερώσουμε το πρόγραμμα περιήγησης ότι δεν κλιμακώνει τη σελίδα. Το πρόγραμμα περιήγησης για κινητά Safari έχει ρυθμιστεί σε ελάχιστη κλίμακα = "0,25" και μέγιστη κλίμακα = "1,6".
Τώρα ας περάσουμε στις περιπτώσεις χρήσης.
Συνήθως, η μετα-ετικέτα θύρας προβολής χρησιμοποιείται για τον ορισμό του πλάτους και της αρχικής κλίμακας της θύρας προβολής του ιστότοπου σε κινητές συσκευές, για παράδειγμα:
Μπορείτε να ακολουθήσετε ακριβώς το ίδιο παράδειγμα εάν το περιεχόμενό σας δεν είναι ευρύ (δεν αποκόπτεται από το πρόγραμμα περιήγησης), αλλά μάλλον στενό (κάπου εμφανίζεται ένας κενός χώρος):
Ένα τυπικό λάθος που μπορεί να κάνετε όταν χρησιμοποιείτε τη μετα-ετικέτα της θύρας προβολής είναι ότι θα χρησιμοποιήσετε την τιμή αρχική κλίμακα=1για πρότυπα που δεν αποκρίνονται. Τι τρέχει? Αυτό που φταίει εδώ είναι ότι αυτή η ρύθμιση θα κάνει το 100% της σελίδας να αποδίδεται χωρίς κλιμάκωση. Έτσι, ο χρήστης θα πρέπει να ρυθμίσει μόνος του την κλίμακα ή να κάνει κύλιση στη σελίδα για μεγάλο χρονικό διάστημα.
Το σφάλμα μπορεί επίσης να είναι μοιρασιάΠαράμετροι user-scalable=noή μέγιστη κλίμακα=1μαζί με αρχική κλίμακα=1. Αυτό θα απενεργοποιήσει τη δυνατότητα κλιμάκωσης στον ιστότοπο (ενεργό πρότυπα για κινητάΑυτό το χαρακτηριστικό μπορεί σίγουρα να είναι χρήσιμο, αλλά δύσκολα ...). Εφόσον θα απενεργοποιήσουμε την κλιμάκωση, δεν θα έχουμε την ευκαιρία να δούμε ολόκληρη τη σελίδα.
Προσωπικά, μπορώ να σας προτείνω μόνο ένα. Εάν το πρότυπό σας δεν έχει προσαρμοστικότητα για κινητές συσκευές και άλλες συσκευές, μεγέθη οθόνης που διαφέρουν από αυτά για τα οποία είχατε, τότε αφήστε τη δυνατότητα κλιμάκωσης και μην αλλάξετε το μέγεθος της κλίμακας.
Μερικοί άνθρωποι πιστεύουν ότι η κύλιση αριστερά ή δεξιά είναι πολύ κακό και άσχημο. Φυσικά, αυτό δεν είναι κακό, είναι μάλλον άβολο κατά τη γνώμη μου, αλλά μερικές φορές χρειάζεται αυτή η ανάγκη. Για παράδειγμα, ο πελάτης μου έχει έναν ιστότοπο. Έχει μια πλήρη και φορητή έκδοση, καθεμία από αυτές τις εκδόσεις είναι διαφορετικά πρότυπα. Κατά συνέπεια, στο πρότυπο για την επιφάνεια εργασίας, δεν έχει νόημα να κάνετε σύνθετες προσαρμογές και κουδούνια και σφυρίχτρες για τηλέφωνα, η ετικέτα προβολής είναι αρκετή, αλλά στο κινητό, ναι, όλα είναι για τηλέφωνα. Εδώ, θα είναι πιο βολικό για κάποιον να το χρησιμοποιήσει, 2 εναλλακτικές, ας πούμε... Σας ευχαριστώ όλους, καλή επιτυχία!
Τελευταία ενημέρωση: 05/03/2016
Πρώτα απ 'όλα, ας δούμε ένα από τα βασικά σημεία εφαρμογής προσαρμοστικός σχεδιασμός- μετα-ετικέτα θύρας προβολής (στην πραγματικότητα, η προσαρμοστική σχεδίαση ξεκινά με αυτήν την ετικέτα). Ας ξεκινήσουμε με την παρακάτω ιστοσελίδα:
Τακτική ιστοσελίδα
Αυτή είναι μια τυπική ιστοσελίδα που θα μοιάζει με αυτό σε ένα κανονικό πρόγραμμα περιήγησης:
Ωστόσο, εάν εκτελούμε την ίδια ιστοσελίδα σε εξομοιωτή κινητής συσκευής ή σε πραγματικό κινητή συσκευή, τότε δύσκολα μπορούμε να διαβάσουμε τι γράφεται σε αυτό:
Εφαρμόζοντας κλιμάκωση, ο χρήστης μπορεί τελικά να δει τι γράφεται εκεί. Ωστόσο, αυτό δεν είναι πολύ βολικό. Ταυτόχρονα, η ιστοσελίδα έχει πολύ κενό χώρο, κάτι που δεν είναι πολύ όμορφο.
Γιατί συμβαίνει αυτό? Το γεγονός είναι ότι κάθε πρόγραμμα περιήγησης για κινητά ορίζει ορισμένα αρχικά μεγέθη για τη σελίδα και στη συνέχεια προσπαθεί να την προσαρμόσει στα μεγέθη οθόνης της τρέχουσας κινητής συσκευής.
Ολόκληρη η ορατή περιοχή στην οθόνη του προγράμματος περιήγησης περιγράφεται από την έννοια Viewport. Ουσιαστικά, μια θύρα προβολής αντιπροσωπεύει την περιοχή που ένα πρόγραμμα περιήγησης ιστού προσπαθεί να χωρέσει σε μια ιστοσελίδα. Για παράδειγμα, το πρόγραμμα περιήγησης Safari στο iPhone και το iPod ορίζει το προεπιλεγμένο πλάτος της θύρας προβολής στα 980 pixel. Δηλαδή, έχοντας λάβει μια σελίδα και την εισάγει σε μια θύρα προβολής με πλάτος 980 pixel, το πρόγραμμα περιήγησης τη συμπιέζει στο μέγεθος μιας κινητής συσκευής. Για παράδειγμα, εάν το πλάτος της οθόνης ενός smartphone είναι 320 pixel, τότε η σελίδα θα συμπιεστεί σε αυτό το μέγεθος. Και όλα τα στοιχεία στη σελίδα θα έχουν συντελεστή κλιμάκωσης 320/980.
Γιατί χρησιμοποιούνται 980 pixel σε αυτήν την περίπτωση και, ας πούμε, όχι το πραγματικό μέγεθος οθόνης; Το θέμα είναι ότι, από προεπιλογή, το πρόγραμμα περιήγησης πιστεύει ότι κάθε ιστοσελίδα έχει σχεδιαστεί για επιτραπέζιους υπολογιστές. Και το συνηθισμένο πλάτος μιας τοποθεσίας επιφάνειας εργασίας μπορεί να θεωρηθεί 980 pixel.
Σε αυτήν την περίπτωση, κάθε πρόγραμμα περιήγησης ορίζει το δικό του πλάτος της περιοχής της θύρας προβολής, προαιρετικά 980 pixel. Άλλα προγράμματα περιήγησης ενδέχεται να υποστηρίζουν διαφορετικές τιμές για το αρχικό πλάτος. Θα κάνουν όμως και κλιμάκωση.
Για να αποφύγετε αυτήν την όχι πολύ ευχάριστη εικόνα, θα πρέπει να χρησιμοποιήσετε τη μετα-ετικέτα της θύρας προβολής. Έχει τον εξής ορισμό:
Στο χαρακτηριστικό περιεχομένου της μετα-ετικέτας, μπορούμε να ορίσουμε τις ακόλουθες παραμέτρους:
Παράμετρος | Αξίες | Περιγραφή |
Δέχεται μια ακέραια τιμή σε pixel ή μια τιμή πλάτους συσκευής | Ορίζει το πλάτος της περιοχής της θύρας προβολής |
|
Δέχεται μια ακέραια τιμή σε pixel ή μια τιμή ύψους συσκευής | Ορίζει το ύψος της περιοχής της θύρας προβολής |
|
Καθορίζει τον παράγοντα κλιμάκωσης για το αρχικό μέγεθος της θύρας προβολής. Η τιμή 1,0 δεν καθορίζει καμία κλιμάκωση |
||
Καθορίζει εάν ο χρήστης μπορεί να χρησιμοποιήσει χειρονομίες για μεγέθυνση της σελίδας |
||
Αριθμός κινητής υποδιαστολής από 0,1 και άνω | Ορίζει την ελάχιστη κλίμακα μεγέθους της θύρας προβολής. Η τιμή 1,0 δεν καθορίζει καμία κλιμάκωση |
|
Αριθμός κινητής υποδιαστολής από 0,1 και άνω | Ορίζει τη μέγιστη κλίμακα μεγέθους της θύρας προβολής. Η τιμή 1,0 δεν καθορίζει καμία κλιμάκωση |
Τώρα ας τροποποιήσουμε το προηγούμενο παράδειγμα ιστοσελίδας χρησιμοποιώντας τη μετα-ετικέτα:
Τακτική ιστοσελίδα
Η ιστοσελίδα φαίνεται σίγουρα καλύτερη χάρη στη χρήση της μετα-ετικέτας viewport. Χρησιμοποιώντας την παράμετρο width=device-width, λέμε στο πρόγραμμα περιήγησης ιστού ότι το αρχικό πλάτος της θύρας προβολής δεν πρέπει να είναι 980 pixel ή κάποιος άλλος αριθμός, αλλά το πραγματικό πλάτος της οθόνης της συσκευής. Επομένως, το πρόγραμμα περιήγησης ιστού δεν θα κάνει ζουμ αφού έχουμε το ίδιο πλάτος και πλάτος θύρας προβολής.
Μπορούμε επίσης να χρησιμοποιήσουμε άλλες επιλογές, όπως να εμποδίσουμε τον χρήστη να κλιμακώσει τις διαστάσεις της σελίδας:
Συνέβη ότι τα προγράμματα περιήγησης για κινητά εμφανίστηκαν σχετικά πρόσφατα και μέχρι εκείνη τη στιγμή υπήρχαν ήδη ιστότοποι στο δίκτυο μεγάλο ποσό. Φυσικά, όλοι αυτοί οι ιστότοποι δεν βελτιστοποιήθηκαν καθόλου για τις μικρές οθόνες των smartphone και τα smartphone, με τη σειρά τους, αναγκάστηκαν να πιστέψουν ότι όλοι οι ιστότοποι έχουν πλάτος περίπου 1000 px (980 px στο Safari). Ήταν απαραίτητο να λυθεί με κάποιο τρόπο η τρέχουσα κατάσταση και η Apple κατέληξε σε μια μετα-ετικέτα , το οποίο, σύμφωνα με την παράδοση, έκλεψαν αργότερα όλοι οι άλλοι κατασκευαστές προγραμμάτων περιήγησης.
Ας δούμε μια τυπική επική διάταξη ιστότοπου:
html
Γειά σου Κόσμε
Ας το ανοίξουμε σε ένα πρόγραμμα περιήγησης για κινητά. Να τι θα δούμε:
Όπως σωστά επισημάνατε, το κείμενο είναι πολύ μικρό και συνέβη επειδή το σαφάρι προσπάθησε να χωρέσει τον ιστότοπό μας (το οποίο υποθέτει ότι είναι φτιαγμένο για προγράμματα περιήγησης με πλάτος οθόνης περίπου 980 px)
Ας πούμε τώρα στο πρόγραμμα περιήγησης ότι ο ιστότοπός μας ανταποκρίνεται σε οποιοδήποτε πλάτος οθόνης.
html
Τι συνέβη:
Λοιπόν, τώρα όλα είναι πολύ καλύτερα. Δηλώνοντας width=device-width , είπαμε στο πρόγραμμα περιήγησης ότι θέλαμε η θύρα προβολής περιεχομένου να είναι ίση με το πλάτος της οθόνης της κινητής συσκευής.
Μπορείτε να ορίσετε μη αυτόματα μια τιμή για το πλάτος. Για παράδειγμα content="width=320px" , αλλά αυτό δεν συνιστάται επειδή διαφορετικά smartphone μπορεί να έχουν τελείως διαφορετικά πλάτη οθόνης.
Μια πολύ κοινή επιλογή είναι:
html
αυτή η επιλογή ορίζει το πλάτος της σελίδας και την αρχική κλίμακα (σε αυτήν την περίπτωση, χωρίς κλιμάκωση)
Συχνά χρησιμοποιούνται επίσης τα ακόλουθα:
html
Τέτοιες τιμές χρησιμοποιούνται εάν ο ιστότοπος θα χρησιμοποιηθεί και λειτουργεί ως εφαρμογή για κινητό. Εκείνοι
- όταν φορτώσει η σελίδα δεν θα κλιμακωθεί
- η σελίδα θα καταλαμβάνει όλο το πλάτος του προγράμματος περιήγησης για κινητά
- οποιαδήποτε προσαρμοσμένη κλιμάκωση απαγορεύεται
- διαθέσιμη μόνο οριζόντια και κατακόρυφη κύλιση
Χρησιμοποιήστε αυτήν τη διαμόρφωση μόνο εάν γνωρίζετε τι κάνετε.
Ας ρίξουμε μια ματιά στις έγκυρες παραμέτρους και τις τιμές τους που είναι διαθέσιμες στη μετα-ετικέτα της θύρας προβολής.
πλάτος
Ένας ακέραιος αριθμός (από 200px - 10.000px) ή "device-width".
Ορίζει το πλάτος της θύρας προβολής. Εάν η θύρα προβολής nirina δεν έχει καθοριστεί, τότε:
- για mobile safari είναι 980px
- Opera - 850 px
- Android WebKit - 800px
- IE - 974 εικονοστοιχεία
ύψος
Ένας ακέραιος αριθμός (μεταξύ 223px και 10.000px) ή "ύψος συσκευής"
ορίζει το ύψος της θύρας προβολής. Το 99% των περιπτώσεων, απλώς αγνοήστε αυτήν την παράμετρο, αλλά αν τη χρειάζεστε πραγματικά, δοκιμάστε και πειραματιστείτε. Καλή τύχη..
αρχική κλίμακα
1.0 - μην κλιμακώνεστε. Ορίζει την κλίμακα της σελίδας. Αυξήστε την τιμή - αυξήστε την κλίμακα.
κλιμακούμενη από το χρήστη
Οι διαθέσιμες τιμές είναι όχι ή ναι
Καθορίζει εάν η κλίμακα σελίδας μπορεί να αλλάξει. Η προεπιλογή είναι ναι στο Safari.
ελάχιστης κλίμακας και μέγιστης κλίμακας
Διαθέσιμες τιμές (από 0,1 έως 10).
1.0 - μην κλιμακώνεστε. Καθορίζει την ελάχιστη και τη μέγιστη κλίμακα της θύρας προβολής, αντίστοιχα.
Η προεπιλογή στο κινητό Safari είναι ελάχιστη κλίμακα = "0,25" , μέγιστη κλίμακα = "1,6".
Συμβουλή:Μην χρησιμοποιείτε μετα-ετικέτες (συμπεριλαμβανομένου αυτού) μέχρι να καταλάβετε γιατί χρειάζονται όλα αυτά. Και δοκιμάστε τα πάντα σε διαφορετικά προγράμματα περιήγησης για κινητά. Καλή τύχη!
Γεια σε όλους, σήμερα θα μιλήσουμε τι είναι το viewportκαι πώς να το χρησιμοποιήσετε.
Για να καταλάβετε τι είναι, χρειάζεστε κάποιο είδος κινητής συσκευής. Τώρα ας δημιουργήσουμε ένα απλό htmlσελίδα σαν αυτή:
δοκιμαστική ανάρτηση
αυτό είναι μια δοκιμαστική ανάρτηση
άλλη ανάρτηση
αυτό είναι πολύ ωραίο
νέα ανάρτηση
Τώρα ας ανοίξουμε τη σελίδα μας σε κινητή συσκευή και τι θα δούμε; Και θα δούμε ότι το κείμενο είναι πολύ μικρό και δυσανάγνωστο. Ωστόσο, εάν προσθέσουμε την ακόλουθη ετικέτα περιεχομένου στην ετικέτα κεφάλι
Τώρα το κείμενο φαίνεται μια χαρά. Εδώ είναι το σχέδιο. Αριστερά χωρίς ετικέτα και δεξιά με αυτό
Γιατί συμβαίνει αυτό? Το γεγονός είναι ότι το προεπιλεγμένο πρόγραμμα περιήγησης πιστεύει ότι ο ιστότοπος έχει δημιουργηθεί για την έκδοση του προγράμματος περιήγησης για υπολογιστές και προσπαθεί να τον χωρέσει πλήρως στο παράθυρο του smartphone σας. Ορίζοντας την ετικέτα, λέμε στο πρόγραμμα περιήγησης του τηλεφώνου ότι το πλάτος προβολής είναι ίσο με το πλάτος του smartphone. Εδώ είναι μια τόσο απλή ετικέτα, αλλά βοηθάει πολύ κατά τη δημιουργία έκδοση για κινητάιστοσελίδα.
Μπορείτε επίσης να ρυθμίσετε την κλίμακα. Για αυτό, χρησιμοποιείται αρχική κλίμακα
Εάν θέλετε να αποτρέψετε τον χρήστη από το να μεγεθύνει τη σελίδα στο smartphone του, μπορείτε να γράψετε τα εξής:
Χρειάζεται όμως προσοχή, γιατί. συμβαίνει ότι το κείμενο είναι αρκετά δύσκολο να διαβαστεί και πρέπει να το μεγεθύνετε, αλλά εάν αυτό απαγορεύεται, τότε θα προκαλέσετε ταλαιπωρία στον χρήστη.
Υποστήριξη προγράμματος περιήγησης
Υποστήριξη Android αλλά μέχρι την έκδοση 2.2 . η αρχική κλίμακα είναι 1.0
Symbian, σειρά Nokia 40, Motorola, Opera mobile/mini και NetFront δενυποστήριξη
Το IE υποστηρίζει με 6 εκδόσεις
Το BlackBerry υποστηρίζει από την έκδοση 4.2.1
Όπως μπορείτε να δείτε, η υποστήριξη εξακολουθεί να είναι ελλιπής, αλλά μπορείτε ήδη να χρησιμοποιήσετε αυτήν την ετικέτα, επειδή. τα περισσότερα νέα smartphone το έχουν ήδη καταλάβει.
Έτσι, αυτό ολοκληρώνει αυτό το άρθρο, ευχαριστώ για την ανάγνωση.
→ Προσαρμογή συσκευής CSS μέσω @viewportΌταν θέλουμε να προσαρμόσουμε το παράθυρο του προγράμματος περιήγησης στη συσκευή μας, συνήθως χρησιμοποιούμε Ετικέτα HTML . Ωστόσο, παραδόξως, η μετα-ετικέτα δεν είναι "κανονιστική" - δεν είναι στο επίσημο πρότυπο του W3C.
Η μετα-ετικέτα θύρας προβολής εφαρμόστηκε για πρώτη φορά από την Appleστο iPhone και στη συνέχεια σε άλλους προμηθευτές προγράμματος περιήγησης. Σήμερα χρησιμοποιείται ευρέως λόγω της δημοτικότητας των iOS, Android και άλλων πλατφορμών για tablet και smartphone.
Δεδομένου ότι η μετα-ετικέτα viewport προορίζεται αποκλειστικά για προσαρμογή σήμανσης, μπορούμε να πούμε ότι ανήκει δικαιωματικά στο CSS. Γι' αυτό το W3C προσπαθεί να τυποποιηθεί νέα μέθοδοςπροσαρμογή, στην οποία ο έλεγχος παραθύρου μεταφέρεται από HTML σε CSS.
@viewport κανόνας css
Με τον νέο κανόνα @viewport, έχουμε τον ίδιο έλεγχο παραθύρου με τη μετα-ετικέτα, με τη διαφορά ότι αυτός ο έλεγχος γίνεται καθαρά μέσω CSS. Όπως και με τη μετα-ετικέτα, συνιστάται να ορίσετε το πλάτος του παραθύρου του προγράμματος περιήγησης χρησιμοποιώντας το πλάτος συσκευής ανεξάρτητο από τη συσκευή:
@viewport (πλάτος: συσκευή-πλάτος; )
Σήμερα το @viewport χρησιμοποιείται από προγραμματιστές για "snap mode" στον IE10 − λειτουργία windows 8, που σας επιτρέπει να εργάζεστε σε λειτουργία πολλαπλών παραθύρων. Παραδόξως, το IE10 αγνοεί τη μετα-ετικέτα εάν το μέγεθος του παραθύρου είναι μικρότερο από 400 εικονοστοιχεία, γεγονός που καθιστά αδύνατη τη βελτιστοποίηση των ιστότοπων που χρησιμοποιούν αυτήν τη μετα-ετικέτα για τόσο μικρά παράθυρα. Για να διορθωθεί αυτό, οι προγραμματιστές θα πρέπει να χρησιμοποιήσουν την παράμετρο πλάτους συσκευής που αναφέρεται παραπάνω ή να ορίσουν έναν κανόνα @viewport στο ερώτημα πολυμέσων.
Χρήση @viewport σε ερωτήματα πολυμέσων
Μπορούμε να χρησιμοποιήσουμε το @viewport σε ερωτήματα πολυμέσων. Για παράδειγμα, το ακόλουθο ερώτημα πολυμέσων χρησιμοποιείται για να ορίσετε τη διάταξη ενός παραθύρου που έχει πλάτος μικρότερο από 400 pixel (για παράδειγμα, λειτουργία πολλαπλών παραθύρωνσε IE10) σε πλάτος 320 pixel.
Οθόνη @media και (μέγιστο πλάτος: 400 pixel) @-ms-viewport (πλάτος: 320 px; ) ... )
ΣΤΟ αυτό το παράδειγμα, εάν η συσκευή έχει ρυθμιστεί σε εύρος ανάλυσης 640 έως 1024 pixel, ο κανόνας @viewport κλιμακώνει το παράθυρο στα 640 pixel.
Οθόνη @media και (ελάχιστο πλάτος: 640 εικονοστοιχεία) και (μέγιστο πλάτος: 1024 εικονοστοιχεία) ( @viewport (πλάτος: 640 εικονοστοιχεία; ) ... )
Νέες λαβές @viewport
Παρόλο που μπορούμε να ελέγξουμε τη λειτουργία ζουμ και ζουμ, ορισμένες από τις ιδιότητες της θύρας προβολής - ή όπως ονομάζονται τώρα "λαβές" - έχουν αλλάξει.
ανίπταμαι διαγωνίως
Ο περιγραφέας ζουμ είναι το ισοδύναμο της αρχικής κλίμακας στη μετα-ετικέτα. Εκτός από την ελάχιστη και τη μέγιστη κλίμακα , υπάρχουν περιγραφείς για μέγιστο ζουμ και ελάχιστο ζουμ:
@viewport (πλάτος: πλάτος συσκευής; ζουμ: 2; )
ζουμ χρήστη
Ο περιγραφέας ζουμ χρήστη είναι ισοδύναμος με την παράμετρο με δυνατότητα κλιμάκωσης από το χρήστη
@viewport (πλάτος: πλάτος συσκευής; ζουμ χρήστη: σταθερό; )
Υποστήριξη προγράμματος περιήγησης
Από σήμερα, ο κανόνας css @viewport υποστηρίζεται μόνο από Opera και IE10. Φαίνεται ότι το Chrome και άλλα προγράμματα περιήγησης θα το εφαρμόσουν επίσης σύντομα. αυτή η μετα-ετικέτα αναμένεται να γίνει σύντομα το νέο επίσημο πρότυπο ιστού.
Προς το παρόν, πρέπει να προσθέσετε ένα πρόθεμα προμηθευτή στον κανόνα @viewport:
@-ms-viewport ( πλάτος: συσκευή-πλάτος; ) @-o-viewport ( πλάτος: πλάτος συσκευής; ) @viewport ( πλάτος: πλάτος συσκευής; )
Φυσικά, πρέπει ακόμα να συμπεριλάβουμε τη μετα-ετικέτα της θύρας προβολής σελίδα html, επειδή δεν θα πάει πουθενά σύντομα. Αλλά δεν είναι πια τόσο τρομακτικό να κοιτάμε το μέλλον - η προσθήκη του κανόνα @viewport απλώς κάνει τους ιστότοπους και τις εφαρμογές μας φιλικές προς το μέλλον.