Browser und Geräte
Erfahren Sie mehr über die Browser und Geräte, von modern bis alt, die von Bootstrap unterstützt werden, einschließlich bekannter Macken und Fehler für jeden.
Unterstützte Browser
Bootstrap unterstützt die neuesten, stabilen Versionen aller wichtigen Browser und Plattformen. Unter Windows unterstützen wir Internet Explorer 10-11 / Microsoft Edge .
Alternative Browser, die die neueste Version von WebKit, Blink oder Gecko verwenden, ob direkt oder über die Webansichts-API der Plattform, werden nicht explizit unterstützt. Allerdings sollte Bootstrap (in den meisten Fällen) auch in diesen Browsern korrekt angezeigt und funktionieren. Genauere Support-Informationen finden Sie weiter unten.
Sie finden unser unterstütztes Angebot an Browsern und deren Versionen in unserem.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
Wir verwenden Autoprefixer , um die beabsichtigte Browserunterstützung über CSS-Präfixe zu handhaben, die Browserslist verwenden , um diese Browserversionen zu verwalten. Konsultieren Sie deren Dokumentation, um zu erfahren, wie Sie diese Tools in Ihre Projekte integrieren können.
Mobile Geräte
Im Allgemeinen unterstützt Bootstrap die neuesten Versionen der Standardbrowser jeder wichtigen Plattform. Beachten Sie, dass Proxy-Browser (wie Opera Mini, Turbo-Modus von Opera Mobile, UC Browser Mini, Amazon Silk) nicht unterstützt werden.
| Chrom | Feuerfuchs | Safari | Android-Browser und WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Unterstützt | Unterstützt | N / A | Android v5.0+ wird unterstützt | Unterstützt |
| iOS | Unterstützt | Unterstützt | Unterstützt | N / A | Unterstützt |
| Windows 10 Mobil | N / A | N / A | N / A | N / A | Unterstützt |
Desktop-Browser
Ebenso werden die neuesten Versionen der meisten Desktop-Browser unterstützt.
| Chrom | Feuerfuchs | Internet Explorer | Microsoft Edge | Oper | Safari | |
|---|---|---|---|---|---|---|
| Mac | Unterstützt | Unterstützt | N / A | Unterstützt | Unterstützt | Unterstützt |
| Windows | Unterstützt | Unterstützt | Unterstützt, IE10+ | Unterstützt | Unterstützt | Nicht unterstützt |
Für Firefox unterstützen wir zusätzlich zur neuesten normalen stabilen Version auch die neueste Extended Support Release (ESR) -Version von Firefox.
Inoffiziell sollte Bootstrap in Chromium und Chrome für Linux, Firefox für Linux und Internet Explorer 9 gut genug aussehen und sich gut verhalten, obwohl sie nicht offiziell unterstützt werden.
Eine Liste einiger Browserfehler, mit denen Bootstrap zu kämpfen hat, finden Sie in unserer Wall of browser bugs .
Internet Explorer
Internet Explorer 10+ wird unterstützt; IE9 und unten ist es nicht. Bitte beachten Sie, dass einige CSS3-Eigenschaften und HTML5-Elemente in IE10 nicht vollständig unterstützt werden oder Eigenschaften mit Präfix für die volle Funktionalität erfordern. Besuchen Sie Can I use… für Details zur Browserunterstützung von CSS3- und HTML5-Funktionen. Wenn Sie IE8-9-Unterstützung benötigen, verwenden Sie Bootstrap 3.
Modale und Dropdowns auf Mobilgeräten
Überlauf und Scrollen
Die Unterstützung für overflow: hidden;das <body>Element ist in iOS und Android ziemlich begrenzt. Wenn Sie zu diesem Zweck in einem der Browser dieser Geräte über den oberen oder unteren Rand eines Modals hinausscrollen, <body>beginnt der Inhalt zu scrollen. Siehe Chrome-Fehler #175502 (behoben in Chrome v40) und WebKit-Fehler #153852 .
iOS-Textfelder und Scrollen
Ab iOS 9.2 wird, während ein Modal geöffnet ist , der Inhalt unter dem Modal gescrollt , wenn die anfängliche Berührung einer Scroll-Geste innerhalb der Grenzen eines Texts <input>oder eines liegt, und nicht das Modal selbst. Siehe WebKit-Fehler Nr. 153856 .<textarea><body>
Navigationsleisten-Dropdowns
Aufgrund der Komplexität der Z-Indizierung wird das .dropdown-backdropElement unter iOS im Navi nicht verwendet. Um Dropdowns in Navigationsleisten zu schließen, müssen Sie also direkt auf das Dropdown-Element (oder jedes andere Element, das ein Klickereignis in iOS auslöst ) klicken.
Browser-Zoom
Das Zoomen von Seiten führt zwangsläufig zu Rendering-Artefakten in einigen Komponenten, sowohl in Bootstrap als auch im Rest des Webs. Je nach Problem können wir es möglicherweise beheben (zuerst suchen und dann ggf. ein Problem öffnen). Wir neigen jedoch dazu, diese zu ignorieren, da sie oft keine direkte Lösung außer hackigen Workarounds haben.
Sticky :hover/ :focusauf iOS
Während :hoverdies auf den meisten Touch-Geräten nicht möglich ist, emuliert iOS dieses Verhalten, was zu „klebrigen“ Hover-Stilen führt, die nach dem Tippen auf ein Element bestehen bleiben. Diese Hover-Stile werden nur entfernt, wenn Benutzer auf ein anderes Element tippen. Dieses Verhalten wird als weitgehend unerwünscht angesehen und scheint auf Android- oder Windows-Geräten kein Problem zu sein.
In unseren v4-Alpha- und -Betaversionen haben wir unvollständigen und auskommentierten Code für die Aktivierung eines Medienabfrage-Shims eingefügt, das Hover-Stile in Browsern von Touch-Geräten deaktiviert, die das Hovern emulieren. Diese Arbeit wurde nie vollständig abgeschlossen oder aktiviert, aber um einen vollständigen Bruch zu vermeiden, haben wir uns dafür entschieden, dieses Shim zu verwerfen und die Mixins als Abkürzungen für die Pseudoklassen beizubehalten.
Selbst in einigen modernen Browsern kann das Drucken skurril sein.
Ab Safari v8.0 kann die Verwendung der .containerKlasse mit fester Breite dazu führen, dass Safari beim Drucken eine ungewöhnlich kleine Schriftgröße verwendet. Siehe Problem Nr. 14868 und WebKit-Fehler Nr. 138192 für weitere Details. Eine mögliche Problemumgehung ist das folgende CSS:
@media print {
.container {
width: auto;
}
}
Aktienbrowser für Android
Standardmäßig wird Android 4.1 (und anscheinend sogar einige neuere Versionen) mit der Browser-App als Standard-Webbrowser der Wahl (im Gegensatz zu Chrome) ausgeliefert. Leider hat die Browser-App im Allgemeinen viele Fehler und Inkonsistenzen mit CSS.
Menü auswählen
Bei <select>Elementen zeigt der Android Stock Browser die seitlichen Steuerelemente nicht an, wenn ein border-radiusund/oder borderangewendet wird. (Weitere Informationen finden Sie in dieser StackOverflow-Frage .) Verwenden Sie das Code-Snippet unten, um das anstößige CSS zu entfernen, und rendern Sie <select>es als nicht formatiertes Element im Stock-Browser von Android. Das User-Agent-Sniffing vermeidet Interferenzen mit Chrome-, Safari- und Mozilla-Browsern.
<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>
Möchten Sie ein Beispiel sehen? Schauen Sie sich diese JS Bin-Demo an .
Validatoren
Um alten und fehlerhaften Browsern das bestmögliche Erlebnis zu bieten, verwendet Bootstrap an mehreren Stellen CSS-Browser-Hacks , um spezielles CSS auf bestimmte Browserversionen auszurichten, um Fehler in den Browsern selbst zu umgehen. Diese Hacks führen verständlicherweise dazu, dass sich CSS-Validierer darüber beschweren, dass sie ungültig sind. An einigen Stellen verwenden wir auch modernste CSS-Funktionen, die noch nicht vollständig standardisiert sind, aber diese dienen ausschließlich der progressiven Verbesserung.
Diese Validierungswarnungen spielen in der Praxis keine Rolle, da der Nicht-Hacky-Teil unseres CSS vollständig validiert und die Hacky-Teile das ordnungsgemäße Funktionieren des Nicht-Hacky-Teils nicht beeinträchtigen, weshalb wir diese speziellen Warnungen absichtlich ignorieren.
Unsere HTML-Dokumente enthalten ebenfalls einige triviale und belanglose HTML-Validierungswarnungen, da wir eine Problemumgehung für einen bestimmten Firefox-Fehler enthalten .