Source

Προγράμματα περιήγησης και συσκευές

Μάθετε για τα προγράμματα περιήγησης και τις συσκευές, από μοντέρνα έως παλιά, που υποστηρίζονται από το Bootstrap, συμπεριλαμβανομένων των γνωστών παραξενιών και σφαλμάτων για το καθένα.

Υποστηριζόμενα προγράμματα περιήγησης

Το Bootstrap υποστηρίζει τις πιο πρόσφατες, σταθερές εκδόσεις όλων των μεγάλων προγραμμάτων περιήγησης και πλατφορμών. Στα Windows, υποστηρίζουμε τον Internet Explorer 10-11 / Microsoft Edge .

Τα εναλλακτικά προγράμματα περιήγησης που χρησιμοποιούν την πιο πρόσφατη έκδοση του WebKit, του Blink ή του Gecko, είτε απευθείας είτε μέσω του API προβολής ιστού της πλατφόρμας, δεν υποστηρίζονται ρητά. Ωστόσο, το Bootstrap θα πρέπει (στις περισσότερες περιπτώσεις) να εμφανίζει και να λειτουργεί σωστά και σε αυτά τα προγράμματα περιήγησης. Πιο συγκεκριμένες πληροφορίες υποστήριξης παρέχονται παρακάτω.

Κινητές συσκευές

Σε γενικές γραμμές, το 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 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 .