Προγράμματα περιήγησης και συσκευές
Μάθετε για τα προγράμματα περιήγησης και τις συσκευές, από μοντέρνα έως παλιά, που υποστηρίζονται από το Bootstrap, συμπεριλαμβανομένων των γνωστών παραξενιών και σφαλμάτων για το καθένα.
Υποστηριζόμενα προγράμματα περιήγησης
Το Bootstrap υποστηρίζει τις πιο πρόσφατες, σταθερές εκδόσεις όλων των μεγάλων προγραμμάτων περιήγησης και πλατφορμών. Στα Windows, υποστηρίζουμε τον Internet Explorer 10-11 / Microsoft Edge .
Τα εναλλακτικά προγράμματα περιήγησης που χρησιμοποιούν την πιο πρόσφατη έκδοση του WebKit, του Blink ή του Gecko, είτε απευθείας είτε μέσω του API προβολής ιστού της πλατφόρμας, δεν υποστηρίζονται ρητά. Ωστόσο, το Bootstrap θα πρέπει (στις περισσότερες περιπτώσεις) να εμφανίζει και να λειτουργεί σωστά και σε αυτά τα προγράμματα περιήγησης. Πιο συγκεκριμένες πληροφορίες υποστήριξης παρέχονται παρακάτω.
Μπορείτε να βρείτε την υποστηριζόμενη γκάμα προγραμμάτων περιήγησης και τις εκδόσεις τους στα.browserslistrc file :
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
Χρησιμοποιούμε το Autoprefixer για να χειριστούμε την προβλεπόμενη υποστήριξη του προγράμματος περιήγησης μέσω προθεμάτων CSS, το οποίο χρησιμοποιεί τη λίστα περιηγητών για τη διαχείριση αυτών των εκδόσεων του προγράμματος περιήγησης. Συμβουλευτείτε την τεκμηρίωσή τους για το πώς να ενσωματώσετε αυτά τα εργαλεία στα έργα σας.
Κινητές συσκευές
Σε γενικές γραμμές, το Bootstrap υποστηρίζει τις πιο πρόσφατες εκδόσεις των προεπιλεγμένων προγραμμάτων περιήγησης κάθε μεγάλης πλατφόρμας. Σημειώστε ότι τα προγράμματα περιήγησης μεσολάβησης (όπως Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) δεν υποστηρίζονται.
| Χρώμιο | Firefox | Σαφάρι | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Υποστηρίζεται | Υποστηρίζεται | N/A | Υποστηρίζεται Android v5.0+ | Υποστηρίζεται |
| iOS | Υποστηρίζεται | Υποστηρίζεται | Υποστηρίζεται | N/A | Υποστηρίζεται |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Υποστηρίζεται |
Προγράμματα περιήγησης για επιτραπέζιους υπολογιστές
Ομοίως, υποστηρίζονται οι πιο πρόσφατες εκδόσεις των περισσότερων προγραμμάτων περιήγησης για επιτραπέζιους υπολογιστές.
| Χρώμιο | Firefox | Internet Explorer | Microsoft Edge | ΛΥΡΙΚΗ ΣΚΗΝΗ | Σαφάρι | |
|---|---|---|---|---|---|---|
| Μακ | Υποστηρίζεται | Υποστηρίζεται | N/A | Υποστηρίζεται | Υποστηρίζεται | Υποστηρίζεται |
| Windows | Υποστηρίζεται | Υποστηρίζεται | Υποστηρίζεται, IE10+ | Υποστηρίζεται | Υποστηρίζεται | Δεν υποστηρίζεται |
Για τον Firefox, εκτός από την πιο πρόσφατη κανονική σταθερή έκδοση, υποστηρίζουμε επίσης την τελευταία έκδοση Extended Support Release (ESR) του Firefox.
Ανεπίσημα, το Bootstrap θα πρέπει να φαίνεται και να συμπεριφέρεται αρκετά καλά σε Chromium και Chrome για Linux, Firefox για Linux και Internet Explorer 9, αν και δεν υποστηρίζονται επίσημα.
Για μια λίστα με ορισμένα από τα σφάλματα του προγράμματος περιήγησης με τα οποία πρέπει να αντιμετωπίσει το Bootstrap, ανατρέξτε στο Wall of browser bugs .
Internet Explorer
Υποστηρίζεται ο Internet Explorer 10+. IE9 και κάτω δεν είναι. Λάβετε υπόψη ότι ορισμένες ιδιότητες CSS3 και στοιχεία HTML5 δεν υποστηρίζονται πλήρως στον IE10 ή απαιτούν ιδιότητες προθέματος για πλήρη λειτουργικότητα. Επισκεφτείτε την ενότητα Μπορώ να χρησιμοποιήσω… για λεπτομέρειες σχετικά με την υποστήριξη του προγράμματος περιήγησης των λειτουργιών CSS3 και HTML5. Εάν χρειάζεστε υποστήριξη IE8-9, χρησιμοποιήστε το Bootstrap 3.
Τρόποι και αναπτυσσόμενα στοιχεία σε κινητά
Υπερχείλιση και κύλιση
Η υποστήριξη για overflow: hidden;το <body>στοιχείο είναι αρκετά περιορισμένη σε iOS και Android. Για το σκοπό αυτό, όταν κάνετε κύλιση πέρα από το επάνω ή το κάτω μέρος ενός modal σε κάποιο από τα προγράμματα περιήγησης αυτών των συσκευών, το <body>περιεχόμενο θα αρχίσει να κύλιση. Δείτε το σφάλμα Chrome #175502 (διορθώθηκε στο Chrome v40) και το σφάλμα WebKit #153852 .
Πεδία κειμένου iOS και κύλιση
Από το iOS 9.2, ενώ ένα modal είναι ανοιχτό, εάν το αρχικό άγγιγμα μιας κίνησης κύλισης βρίσκεται εντός των ορίων ενός κειμένου <input>ή ενός <textarea>, το <body>περιεχόμενο κάτω από το modal θα πραγματοποιηθεί κύλιση αντί για το ίδιο το modal. Δείτε το σφάλμα WebKit #153856 .
Αναπτυσσόμενα μενού γραμμής πλοήγησης
Το .dropdown-backdropστοιχείο δεν χρησιμοποιείται στο iOS στην πλοήγηση λόγω της πολυπλοκότητας της ευρετηρίασης z. Επομένως, για να κλείσετε τα αναπτυσσόμενα μενού στις γραμμές πλοήγησης, πρέπει να κάνετε απευθείας κλικ στο αναπτυσσόμενο στοιχείο (ή σε οποιοδήποτε άλλο στοιχείο που θα ενεργοποιήσει ένα συμβάν κλικ στο iOS ).
Μεγέθυνση προγράμματος περιήγησης
Η μεγέθυνση σελίδας αναπόφευκτα παρουσιάζει τεχνουργήματα απόδοσης σε ορισμένα στοιχεία, τόσο στο Bootstrap όσο και στον υπόλοιπο ιστό. Ανάλογα με το πρόβλημα, ενδέχεται να είμαστε σε θέση να το διορθώσουμε (πρώτα κάντε αναζήτηση και μετά ανοίξτε ένα πρόβλημα εάν χρειάζεται). Ωστόσο, τείνουμε να τα αγνοούμε, καθώς συχνά δεν έχουν άμεση λύση εκτός από τυχαίες λύσεις.
Sticky :hover/ :focusσε iOS
Αν :hoverκαι δεν είναι δυνατό στις περισσότερες συσκευές αφής, το iOS μιμείται αυτήν τη συμπεριφορά, με αποτέλεσμα να δημιουργούνται «κολλώδη» στυλ αιώρησης που παραμένουν μετά το πάτημα ενός στοιχείου. Αυτά τα στυλ τοποθέτησης καταργούνται μόνο όταν οι χρήστες πατήσουν ένα άλλο στοιχείο. Αυτή η συμπεριφορά θεωρείται σε μεγάλο βαθμό ανεπιθύμητη και φαίνεται να μην αποτελεί πρόβλημα σε συσκευές Android ή Windows.
Σε όλες τις εκδόσεις μας v4 alpha και beta, συμπεριλάβαμε ελλιπή και σχολιασμένο κώδικα για τη συμμετοχή σε ένα shim ερωτημάτων πολυμέσων που θα απενεργοποίησε τα στυλ αιώρησης σε προγράμματα περιήγησης συσκευών αφής που μιμούνται την τοποθέτηση του ποντικιού. Αυτή η εργασία δεν ολοκληρώθηκε ή ενεργοποιήθηκε ποτέ πλήρως, αλλά για να αποφευχθεί η πλήρης θραύση, επιλέξαμε να καταργήσουμε αυτό το παράρτημα και να διατηρήσουμε τις μίξεις ως συντομεύσεις για τις ψευδο-κλάσεις.
Εκτύπωση
Ακόμη και σε ορισμένα σύγχρονα προγράμματα περιήγησης, η εκτύπωση μπορεί να είναι περίεργη.
Από το Safari v8.0, η χρήση της κλάσης σταθερού πλάτους .containerμπορεί να κάνει το Safari να χρησιμοποιεί ασυνήθιστα μικρό μέγεθος γραμματοσειράς κατά την εκτύπωση. Δείτε το τεύχος #14868 και το σφάλμα WebKit #138192 για περισσότερες λεπτομέρειες. Μια πιθανή λύση είναι το ακόλουθο CSS:
@media print {
.container {
width: auto;
}
}
Android stock πρόγραμμα περιήγησης
Από το κουτί, το Android 4.1 (και ακόμη και μερικές νεότερες εκδόσεις προφανώς) διατίθεται με την εφαρμογή Browser ως το προεπιλεγμένο πρόγραμμα περιήγησης ιστού (σε αντίθεση με το Chrome). Δυστυχώς, η εφαρμογή Browser έχει πολλά σφάλματα και ασυνέπειες με το CSS γενικά.
Επιλογή μενού
Σε <select>στοιχεία, το πρόγραμμα περιήγησης μετοχών Android δεν θα εμφανίζει τα πλαϊνά στοιχεία ελέγχου εάν υπάρχει border-radiusκαι/ή borderεφαρμόζεται. (Δείτε αυτήν την ερώτηση StackOverflow για λεπτομέρειες.) Χρησιμοποιήστε το παρακάτω απόσπασμα κώδικα για να καταργήσετε το προσβλητικό CSS και να το <select>αποδώσετε ως στοιχείο χωρίς στυλ στο πρόγραμμα περιήγησης μετοχών Android. Το sniffing του παράγοντα χρήστη αποφεύγει τις παρεμβολές στα προγράμματα περιήγησης Chrome, Safari και Mozilla.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
Θέλετε να δείτε ένα παράδειγμα; Δείτε αυτό το demo JS Bin .
Επικυρωτές
Προκειμένου να παρέχει την καλύτερη δυνατή εμπειρία σε παλιά προγράμματα περιήγησης με σφάλματα, το Bootstrap χρησιμοποιεί παραβιάσεις του προγράμματος περιήγησης CSS σε διάφορα σημεία για να στοχεύσει ειδικά CSS σε ορισμένες εκδόσεις του προγράμματος περιήγησης, προκειμένου να επιλύσει σφάλματα στα ίδια τα προγράμματα περιήγησης. Αυτές οι εισβολές αναγκάζουν τους υπεύθυνους επικύρωσης CSS να παραπονεθούν ότι δεν είναι έγκυρες. Σε μερικά σημεία, χρησιμοποιούμε επίσης αιμορραγικές δυνατότητες CSS που δεν είναι ακόμη πλήρως τυποποιημένες, αλλά χρησιμοποιούνται καθαρά για προοδευτική βελτίωση.
Αυτές οι προειδοποιήσεις επικύρωσης δεν έχουν καμία σημασία στην πράξη, καθώς το μη χακαρισμένο τμήμα του CSS μας επικυρώνει πλήρως και τα τυχαία τμήματα δεν παρεμβαίνουν στη σωστή λειτουργία του μη χακαρισμένου τμήματος, επομένως γιατί αγνοούμε εσκεμμένα αυτές τις συγκεκριμένες προειδοποιήσεις.
Τα έγγραφά μας HTML έχουν επίσης κάποιες ασήμαντες και ασήμαντες προειδοποιήσεις επικύρωσης HTML λόγω της συμπερίληψης μιας λύσης για ένα συγκεκριμένο σφάλμα Firefox .