Προγράμματα περιήγησης και συσκευές
Μάθετε για τα προγράμματα περιήγησης και τις συσκευές, από μοντέρνα έως παλιά, που υποστηρίζονται από το Bootstrap, συμπεριλαμβανομένων των γνωστών παραξενιών και σφαλμάτων για το καθένα.
Το Bootstrap υποστηρίζει τις πιο πρόσφατες, σταθερές εκδόσεις όλων των μεγάλων προγραμμάτων περιήγησης και πλατφορμών. Στα Windows, υποστηρίζουμε τον Internet Explorer 10-11 / Microsoft Edge .
Τα εναλλακτικά προγράμματα περιήγησης που χρησιμοποιούν την πιο πρόσφατη έκδοση του WebKit, του Blink ή του Gecko, είτε απευθείας είτε μέσω του API προβολής ιστού της πλατφόρμας, δεν υποστηρίζονται ρητά. Ωστόσο, το Bootstrap θα πρέπει (στις περισσότερες περιπτώσεις) να εμφανίζει και να λειτουργεί σωστά και σε αυτά τα προγράμματα περιήγησης. Πιο συγκεκριμένες πληροφορίες υποστήριξης παρέχονται παρακάτω.
Μπορείτε να βρείτε την υποστηριζόμενη γκάμα προγραμμάτων περιήγησης και τις εκδόσεις τους σταpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Χρησιμοποιούμε το Autoprefixer για να χειριστούμε την προβλεπόμενη υποστήριξη του προγράμματος περιήγησης μέσω προθεμάτων CSS, το οποίο χρησιμοποιεί τη λίστα περιήγησης για τη διαχείριση αυτών των εκδόσεων του προγράμματος περιήγησης. Συμβουλευτείτε την τεκμηρίωσή τους για το πώς να ενσωματώσετε αυτά τα εργαλεία στα έργα σας.
Σε γενικές γραμμές, το Bootstrap υποστηρίζει τις πιο πρόσφατες εκδόσεις των προεπιλεγμένων προγραμμάτων περιήγησης κάθε μεγάλης πλατφόρμας. Λάβετε υπόψη ότι τα προγράμματα περιήγησης μεσολάβησης (όπως Opera Mini, λειτουργία Turbo του Opera Mobile, 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 | 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 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 9.2, ενώ ένα modal είναι ανοιχτό, εάν το αρχικό άγγιγμα μιας κίνησης κύλισης βρίσκεται εντός των ορίων ενός κειμένου <input>ή ενός <textarea>, το <body>περιεχόμενο κάτω από το modal θα πραγματοποιηθεί κύλιση αντί για το ίδιο το modal. Δείτε το σφάλμα WebKit #153856 .
Το .dropdown-backdropστοιχείο δεν χρησιμοποιείται στο iOS στην πλοήγηση λόγω της πολυπλοκότητας της ευρετηρίασης z. Επομένως, για να κλείσετε τα αναπτυσσόμενα μενού στις γραμμές πλοήγησης, πρέπει να κάνετε απευθείας κλικ στο αναπτυσσόμενο στοιχείο (ή σε οποιοδήποτε άλλο στοιχείο που θα ενεργοποιήσει ένα συμβάν κλικ στο iOS ).
Η μεγέθυνση σελίδας αναπόφευκτα παρουσιάζει τεχνουργήματα απόδοσης σε ορισμένα στοιχεία, τόσο στο Bootstrap όσο και στον υπόλοιπο ιστό. Ανάλογα με το πρόβλημα, ενδέχεται να είμαστε σε θέση να το διορθώσουμε (πρώτα κάντε αναζήτηση και μετά ανοίξτε ένα πρόβλημα εάν χρειάζεται). Ωστόσο, τείνουμε να τα αγνοούμε, καθώς συχνά δεν έχουν άμεση λύση εκτός από τυχαίες λύσε��ς.
Αν :hoverκαι δεν είναι δυνατό στις περισσότερες συσκευές αφής, το iOS μιμείται αυτήν τη συμπεριφορά, με αποτέλεσμα τα "κολλώδη" στυλ αιώρησης που παραμένουν μετά το πάτημα ενός στοιχείου. Αυτά τα στυλ τοποθέτησης καταργούνται μόνο όταν οι χρήστες πατήσουν ένα άλλο στοιχείο. Αυτή η συμπεριφορά θεωρείται σε μεγάλο βαθμό ανεπιθύμητη και φαίνεται να μην αποτελεί πρόβλημα σε συσκευές Android ή Windows.
Σε όλες τις εκδόσεις μας v4 alpha και beta, συμπεριλάβαμε ελλιπή και σχολιασμένο κώδικα για τη συμμετοχή σε ένα shim ερωτημάτων πολυμέσων που θα απενεργοποίησε τα στυλ αιώρησης σε προγράμματα περιήγησης συσκευών αφής που μιμούνται την τοποθέτηση του ποντικιού. Αυτή η εργασία δεν ολοκληρώθηκε ή ενεργοποιήθηκε ποτέ πλήρως, αλλά για να αποφευχθεί η πλήρης θραύση, επιλέξαμε να καταργήσουμε αυτό το παράρτημα και να διατηρήσουμε τις μίξεις ως συντομεύσεις για τις ψευδο-κλάσεις.
Ακόμη και σε ορισμένα σύγχρονα προγράμματα περιήγησης, η εκτύπωση μπορεί να είναι περίεργη.
Από το Safari v8.0, η χρήση της κλάσης σταθερού πλάτους .containerμπορεί να κάνει το Safari να χρησιμοποιεί ασυνήθιστα μικρό μέγεθος γραμματοσειράς κατά την εκτύπωση. Δείτε το τεύχος #14868 και το σφάλμα WebKit #138192 για περισσότερες λεπτομέρειες. Μια πιθανή λύση είναι το ακόλουθο CSS:
@media print {
.container {
width: auto;
}
}Από το κουτί, το 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 .