Browser an Apparater
Léiert iwwer d'Browser an Apparater, vu modern bis al, déi vum Bootstrap ënnerstëtzt ginn, dorënner bekannte Quirks a Bugs fir all.
Bootstrap ënnerstëtzt déi lescht, stabil Verëffentlechungen vun alle grousse Browser a Plattformen. Op Windows ënnerstëtzen mir Internet Explorer 10-11 / Microsoft Edge .
Alternativ Browser déi déi lescht Versioun vu WebKit, Blink oder Gecko benotzen, egal ob direkt oder iwwer d'Webview API vun der Plattform, ginn net explizit ënnerstëtzt. Wéi och ëmmer, Bootstrap soll (an de meeschte Fäll) och an dëse Browser korrekt affichéieren a funktionnéieren. Méi spezifesch Ënnerstëtzungsinformatioun gëtt hei ënnen geliwwert.
Dir fannt eis ënnerstëtzt Gamme vu Browser an hir Versiounen an eisempackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Mir benotzen Autoprefixer fir geplangten Browser-Ënnerstëtzung iwwer CSS Präfixe ze handhaben, déi Browserslist benotzt fir dës Browserversioune ze verwalten. Consultéiert hir Dokumentatioun fir wéi Dir dës Tools an Äre Projeten integréiert.
Allgemeng ënnerstëtzt Bootstrap déi lescht Versioune vun de Standardbrowser vun all grousse Plattform. Bedenkt datt Proxy Browser (wéi Opera Mini, Opera Mobile's Turbo Modus, UC Browser Mini, Amazon Silk) net ënnerstëtzt ginn.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Ënnerstëtzt | Ënnerstëtzt | N/A | Android v5.0+ ënnerstëtzt | Ënnerstëtzt |
| iOS | Ënnerstëtzt | Ënnerstëtzt | Ënnerstëtzt | N/A | Ënnerstëtzt |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Ënnerstëtzt |
Ähnlech ginn déi lescht Versioune vun de meescht Desktop-Browser ënnerstëtzt.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Oper | Safari | |
|---|---|---|---|---|---|---|
| Mac | Ënnerstëtzt | Ënnerstëtzt | N/A | N/A | Ënnerstëtzt | Ënnerstëtzt |
| Windows | Ënnerstëtzt | Ënnerstëtzt | Ënnerstëtzt, IE10+ | Ënnerstëtzt | Ënnerstëtzt | Net ënnerstëtzt |
Fir Firefox, zousätzlech zu der leschter normaler stabiler Verëffentlechung, ënnerstëtzen mir och déi lescht Extended Support Release (ESR) Versioun vu Firefox.
Inoffiziell sollt Bootstrap kucken a sech gutt genuch am Chromium a Chrome fir Linux, Firefox fir Linux an Internet Explorer 9 kucken a behuelen, obwuel se net offiziell ënnerstëtzt ginn.
Fir eng Lëscht vun e puer vun de Browser Käfere mat deem Bootstrap ze kämpfen huet, kuckt eis Wall of Browser Bugs .
Internet Explorer 10+ gëtt ënnerstëtzt; IE9 an erof ass net. W.e.g. bewosst datt e puer CSS3 Eegeschaften an HTML5 Elementer net voll am IE10 ënnerstëtzt ginn, oder erfuerderen Präfix Eegeschafte fir voll Funktionalitéit. Besicht Kann ech benotzen ... fir Detailer iwwer Browser Ënnerstëtzung vun CSS3 an HTML5 Funktiounen.
Wann Dir IE8-9 Ënnerstëtzung braucht, benotzt Bootstrap 3. Et ass déi stabilst Versioun vun eisem Code a gëtt nach ëmmer vun eisem Team ënnerstëtzt fir kritesch Bugfixen an Dokumentatiounsännerungen. Wéi och ëmmer, keng nei Features ginn derbäigesat.
Ënnerstëtzung fir overflow: hidden;op d' <body>Element ass zimlech limitéiert op iOS an Android. Zu dësem Zweck, wann Dir laanscht den Top oder ënnen vun engem Modal an engem vun dësen Apparater Browser scrollt, fänkt den <body>Inhalt un ze scrollen. Kuckt de Chrome Bug #175502 (fix am Chrome v40) a WebKit Bug #153852 .
Zënter iOS 9.2, wärend e Modal op ass, wann den initialen Touch vun engem Scrollgeste bannent der Grenz vun engem Text <input>oder engem <textarea>, gëtt den <body>Inhalt ënner dem Modal gerullt amplaz vum Modal selwer. Kuckt WebKit Käfer #153856 .
D' .dropdown-backdropElement gëtt net op iOS am nav benotzt wéinst der Komplexitéit vum z-Indexéierung. Also, fir Dropdowns an Navbars zouzemaachen, musst Dir direkt op d'Dropdown-Element klickt (oder all aner Element, deen e Klick-Event am iOS brennt ).
Säit Zooming präsentéiert zwangsleefeg Rendering Artefakte an e puer Komponenten, souwuel am Bootstrap wéi och am Rescht vum Internet. Ofhängeg vum Problem, kënne mir et vläicht fixéieren (fir d'éischt sichen an dann en Thema opmaachen wann néideg). Wéi och ëmmer, mir tendéieren dës ze ignoréieren well se dacks keng direkt Léisung hunn ausser hacky Léisungen.
Och wann :hoveret net méiglech ass op de meeschte Touch-Geräter, emuléiert iOS dëst Verhalen, wat zu "sticky" Hover-Stiler resultéiert, déi bestoe bleiwen nodeems Dir en Element tippt. Dës Hoverstiler ginn nëmme geläscht wann d'Benotzer en anert Element tippen. Dëst Verhalen gëtt als gréisstendeels ongewollt ugesinn a schéngt keen Thema op Android oder Windows Apparater ze sinn.
Wärend eise v4 Alpha a Beta Verëffentlechungen hu mir onkomplett a kommentéiert Code abegraff fir e Medien Ufro Shim z'entscheeden, deen Hover Stiler an Touch Apparat Browser desaktivéiere géif, déi Hovering emuléieren. Dës Aarbecht war ni komplett fäerdeg oder aktivéiert, awer fir komplette Broch ze vermeiden, hu mir gewielt fir dëse Shim ofzeschafen an d'Mixins als Ofkiirzungen fir d'Pseudo-Klassen ze halen.
Och an e puer modernen Browser kann Dréckerei sprëtzeg sinn.
Zënter Safari v8.0 kann d'Benotzung vun der fixer Breet .containerKlass verursaachen datt Safari eng ongewéinlech kleng Schrëftgréisst beim Drock benotzt. Gesinn Thema #14868 a WebKit Käfer #138192 fir méi Detailer. Eng potenziell Léisung ass déi folgend CSS:
@media print {
.container {
width: auto;
}
}Aus der Këscht gëtt Android 4.1 (an och e puer méi nei Verëffentlechungen anscheinend) mat der Browser App als Standard Webbrowser vun der Wiel (am Géigesaz zu Chrome) geschéckt. Leider huet d'Browser App vill Bugs an Inkonsistenz mat CSS am Allgemengen.
Op <select>Elementer weist den Android Aktiebrowser d'Säitkontrolle net wann et eng border-radiusan / oder borderapplizéiert gëtt. (Kuckt dës StackOverflow Fro fir Detailer.) Benotzt d'Snippet vum Code hei ënnen fir déi beleidegend CSS ze läschen an <select>als onstiléiert Element am Android Aktiebrowser ze maachen. De Benotzer Agent snifft vermeit Interferenz mat Chrome, Safari a Mozilla Browser.
<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>Wëllt Dir e Beispill gesinn? Préift dës JS Bin Demo.
Fir déi bescht méiglech Erfahrung fir al a buggy Browser ze bidden, benotzt Bootstrap CSS Browser Hacks op verschiddene Plazen fir speziell CSS op bestëmmte Browser Versiounen ze zielen fir Bugs an de Browser selwer ëmzegoen. Dës Hacks verursaache verständlech CSS Valideuren ze beschwéieren datt se ongëlteg sinn. Op e puer Plazen benotze mir och bluddeg-Rand CSS Features déi nach net voll standardiséiert sinn, awer dës gi reng fir progressiv Verbesserung benotzt.
Dës Validatiounswarnunge sinn an der Praxis egal well den net-hacky Deel vun eiser CSS voll validéiert an d'hacky Portiounen stéieren net mat der richteger Funktioun vum net-hacky Deel, dofir firwat mir dës speziell Warnungen bewosst ignoréieren.
Eis HTML Dokumenter hunn och e puer trivial an onkonsequent HTML Validatioun Warnungen wéinst eiser Inklusioun vun enger Léisung fir e bestëmmte Firefox Käfer .