Browsers en apparaten
Lees meer over de browsers en apparaten, van modern tot oud, die door Bootstrap worden ondersteund, inclusief bekende eigenaardigheden en bugs voor elk.
Ondersteunde browsers
Bootstrap ondersteunt de nieuwste, stabiele releases van alle belangrijke browsers en platforms. Op Windows ondersteunen we Internet Explorer 10-11 / Microsoft Edge .
Alternatieve browsers die de nieuwste versie van WebKit, Blink of Gecko gebruiken, rechtstreeks of via de webview-API van het platform, worden niet expliciet ondersteund. Bootstrap zou echter (in de meeste gevallen) ook in deze browsers correct moeten worden weergegeven en functioneren. Hieronder vindt u meer specifieke ondersteuningsinformatie.
U kunt ons ondersteunde assortiment browsers en hun versies vinden in onze.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
We gebruiken Autoprefixer om de beoogde browserondersteuning af te handelen via CSS-voorvoegsels, die Browserslist gebruiken om deze browserversies te beheren. Raadpleeg hun documentatie voor het integreren van deze tools in uw projecten.
Mobiele toestellen
Over het algemeen ondersteunt Bootstrap de nieuwste versies van de standaardbrowsers van elk belangrijk platform. Merk op dat proxy-browsers (zoals Opera Mini, Opera Mobile's Turbo-modus, UC Browser Mini, Amazon Silk) niet worden ondersteund.
| Chroom | Firefox | Safari | Android-browser en webweergave | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Ondersteund | Ondersteund | Nvt | Android v5.0+ ondersteund | Ondersteund |
| iOS | Ondersteund | Ondersteund | Ondersteund | Nvt | Ondersteund |
| Windows 10 Mobiel | Nvt | Nvt | Nvt | Nvt | Ondersteund |
Desktopbrowsers
Evenzo worden de nieuwste versies van de meeste desktopbrowsers ondersteund.
| Chroom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Ondersteund | Ondersteund | Nvt | Ondersteund | Ondersteund | Ondersteund |
| ramen | Ondersteund | Ondersteund | Ondersteund, IE10+ | Ondersteund | Ondersteund | Niet ondersteund |
Voor Firefox ondersteunen we, naast de nieuwste normale stabiele release, ook de nieuwste Extended Support Release (ESR) -versie van Firefox.
Onofficieel zou Bootstrap er goed genoeg moeten uitzien en zich goed genoeg gedragen in Chromium en Chrome voor Linux, Firefox voor Linux en Internet Explorer 9, hoewel ze niet officieel worden ondersteund.
Voor een lijst van enkele van de browserbugs waarmee Bootstrap te maken heeft, zie onze Muur met browserbugs .
Internet Explorer
Internet Explorer 10+ wordt ondersteund; IE9 en lager is dat niet. Houd er rekening mee dat sommige CSS3-eigenschappen en HTML5-elementen niet volledig worden ondersteund in IE10, of prefix-eigenschappen vereisen voor volledige functionaliteit. Ga naar Kan ik gebruiken... voor details over browserondersteuning van CSS3- en HTML5-functies. Als je IE8-9-ondersteuning nodig hebt, gebruik dan Bootstrap 3.
Modals en dropdowns op mobiel
Overlopen en scrollen
Ondersteuning voor overflow: hidden;op het <body>element is vrij beperkt in iOS en Android. Daartoe zal de <body>inhoud beginnen te scrollen wanneer u langs de boven- of onderkant van een modaal blad scrolt in een van de browsers van die apparaten. Zie Chrome-bug #175502 (opgelost in Chrome v40) en WebKit-bug #153852 .
iOS-tekstvelden en scrollen
Vanaf iOS 9.2, terwijl een modaal open is, als de eerste aanraking van een scroll-gebaar binnen de grens van een tekstuele <input>of een <textarea>is, zal de <body>inhoud onder de modal worden gescrolld in plaats van de modal zelf. Zie WebKit-bug #153856 .
Navbar-dropdownmenu's
Het .dropdown-backdropelement wordt niet gebruikt op iOS in de nav vanwege de complexiteit van z-indexering. Om dropdowns in navigatiebalken te sluiten, moet u dus rechtstreeks op het dropdown-element klikken (of een ander element dat een klikgebeurtenis in iOS activeert ).
Browser zoomen
Zoomen op pagina's leidt onvermijdelijk tot rendering-artefacten in sommige componenten, zowel in Bootstrap als in de rest van het web. Afhankelijk van het probleem kunnen we het mogelijk oplossen (eerst zoeken en indien nodig een probleem openen). We hebben echter de neiging deze te negeren, omdat ze vaak geen directe oplossing hebben behalve hacky-oplossingen.
Sticky :hover/ :focusop iOS
Hoewel :hoverdit niet mogelijk is op de meeste apparaten met aanraakscherm, emuleert iOS dit gedrag, wat resulteert in "kleverige" zweefstijlen die blijven bestaan nadat op één element is getikt. Deze zweefstijlen worden alleen verwijderd wanneer gebruikers op een ander element tikken. Dit gedrag wordt als grotendeels ongewenst beschouwd en lijkt geen probleem te zijn op Android- of Windows-apparaten.
In al onze alfa- en bètaversies van v4 hebben we onvolledige en becommentarieerde code opgenomen voor het kiezen van een mediaquery-shim die zweefstijlen zou uitschakelen in browsers met aanraakapparaten die zweven nabootsen. Dit werk is nooit volledig voltooid of ingeschakeld, maar om volledige breuk te voorkomen, hebben we ervoor gekozen om deze shim af te schaffen en de mixins te behouden als snelkoppelingen voor de pseudo-klassen.
Afdrukken
Zelfs in sommige moderne browsers kan afdrukken eigenzinnig zijn.
Vanaf Safari v8.0 kan het gebruik van de klasse met vaste breedte .containerervoor zorgen dat Safari een ongebruikelijk kleine lettergrootte gebruikt bij het afdrukken. Zie uitgave #14868 en WebKit-bug #138192 voor meer details. Een mogelijke oplossing is de volgende CSS:
@media print {
.container {
width: auto;
}
}
Android-voorraadbrowser
Out of the box, Android 4.1 (en zelfs sommige nieuwere releases blijkbaar) worden geleverd met de Browser-app als de standaard webbrowser naar keuze (in tegenstelling tot Chrome). Helaas heeft de Browser-app veel bugs en inconsistenties met CSS in het algemeen.
Selecteer menu
Op <select>elementen zal de Android-voorraadbrowser de zijbedieningen niet weergeven als er een border-radiusen/of is bordertoegepast. (Zie deze StackOverflow-vraag voor details.) Gebruik het onderstaande codefragment om de aanstootgevende CSS te verwijderen en het <select>als een ongestileerd element weer te geven in de Android-aandelenbrowser. Het snuiven van de user-agent vermijdt interferentie met Chrome-, Safari- en Mozilla-browsers.
<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>
Een voorbeeld zien? Bekijk deze JS Bin-demo .
Validators
Om de best mogelijke ervaring te bieden aan oude browsers en browsers met fouten, gebruikt Bootstrap op verschillende plaatsen CSS-browserhacks om speciale CSS op bepaalde browserversies te richten om bugs in de browsers zelf te omzeilen. Deze hacks zorgen er begrijpelijkerwijs voor dat CSS-validators klagen dat ze ongeldig zijn. Op een paar plaatsen gebruiken we ook geavanceerde CSS-functies die nog niet volledig zijn gestandaardiseerd, maar deze worden puur gebruikt voor progressieve verbetering.
Deze validatiewaarschuwingen doen er in de praktijk niet toe, aangezien het niet-hacky-gedeelte van onze CSS volledig valideert en de hacky-gedeelten de goede werking van het niet-hacky-gedeelte niet verstoren, vandaar dat we deze specifieke waarschuwingen opzettelijk negeren.
Onze HTML-documenten bevatten eveneens enkele triviale en onbeduidende HTML-validatiewaarschuwingen vanwege onze opname van een tijdelijke oplossing voor een bepaalde Firefox-bug .