Blaaiers en toestelle
Kom meer te wete oor die blaaiers en toestelle, van modern tot oud, wat deur Bootstrap ondersteun word, insluitend bekende eienaardighede en foute vir elkeen.
Ondersteunde blaaiers
Bootstrap ondersteun die nuutste, stabiele vrystellings van alle groot blaaiers en platforms. Op Windows ondersteun ons Internet Explorer 10-11 / Microsoft Edge .
Alternatiewe blaaiers wat die nuutste weergawe van WebKit, Blink of Gecko gebruik, hetsy direk of via die platform se webaansig-API, word nie eksplisiet ondersteun nie. Bootstrap moet egter (in die meeste gevalle) ook korrek in hierdie blaaiers vertoon en funksioneer. Meer spesifieke ondersteuningsinligting word hieronder verskaf.
Jy kan ons ondersteunde reeks blaaiers en hul weergawes vind in ons.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
Ons gebruik Autoprefixer om beoogde blaaierondersteuning te hanteer via CSS-voorvoegsels, wat Browserslist gebruik om hierdie blaaierweergawes te bestuur. Raadpleeg hul dokumentasie vir hoe om hierdie instrumente in jou projekte te integreer.
Mobiele toestelle
Oor die algemeen ondersteun Bootstrap die nuutste weergawes van elke groot platform se verstekblaaiers. Let daarop dat proxy-blaaiers (soos Opera Mini, Opera Mobile se Turbo-modus, UC Browser Mini, Amazon Silk) nie ondersteun word nie.
| Chroom | Firefox | Safari | Android-blaaier en webaansig | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Ondersteun | Ondersteun | NVT | Android v5.0+ ondersteun | Ondersteun |
| iOS | Ondersteun | Ondersteun | Ondersteun | NVT | Ondersteun |
| Windows 10 Mobile | NVT | NVT | NVT | NVT | Ondersteun |
Desktop blaaiers
Net so word die nuutste weergawes van die meeste rekenaarblaaiers ondersteun.
| Chroom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Ondersteun | Ondersteun | NVT | Ondersteun | Ondersteun | Ondersteun |
| Vensters | Ondersteun | Ondersteun | Ondersteun, IE10+ | Ondersteun | Ondersteun | Nie ondersteun nie |
Vir Firefox ondersteun ons, benewens die nuutste normale stabiele vrystelling, ook die nuutste weergawe van Firefox vir uitgebreide ondersteuning (ESR) .
Nie-amptelik behoort Bootstrap goed genoeg te lyk en op te tree in Chromium en Chrome vir Linux, Firefox vir Linux en Internet Explorer 9, hoewel hulle nie amptelik ondersteun word nie.
Vir 'n lys van sommige van die blaaierfoute waarmee Bootstrap moet worstel, sien ons Muur van blaaierfoute .
Internet Explorer
Internet Explorer 10+ word ondersteun; IE9 en af is nie. Wees asseblief bewus daarvan dat sommige CSS3-eienskappe en HTML5-elemente nie ten volle in IE10 ondersteun word nie, of vereis voorvoegseleienskappe vir volle funksionaliteit. Besoek Kan ek gebruik... vir besonderhede oor blaaierondersteuning van CSS3- en HTML5-kenmerke. As jy IE8-9-ondersteuning benodig, gebruik Bootstrap 3.
Modale en aftreklys op selfoon
Oorloop en blaai
Ondersteuning vir overflow: hidden;die <body>element is redelik beperk in iOS en Android. Vir daardie doel, wanneer jy verby die bo- of onderkant van 'n modaal in enige van daardie toestelle se blaaiers blaai, <body>sal die inhoud begin blaai. Sien Chrome-fout #175502 (opgestel in Chrome v40) en WebKit-fout #153852 .
iOS-teksvelde en blaai
Vanaf iOS 9.2, terwyl 'n modaal oop is, as die aanvanklike aanraking van 'n rolgebaar binne die grens van 'n tekstuele <input>of 'n <textarea>is, sal die <body>inhoud onder die modaal gerol word in plaas van die modaal self. Sien WebKit-fout #153856 .
Navbar-aftrekkies
Die .dropdown-backdropelement word nie op iOS in die navigasie gebruik nie as gevolg van die kompleksiteit van z-indeksering. Dus, om aftreklys in navigasiebalke te sluit, moet u direk op die aftrekelement klik (of enige ander element wat 'n klikgebeurtenis in iOS sal afvuur ).
Blaaier zoem
Bladsyzoem bied onvermydelik artefakte in sommige komponente, beide in Bootstrap en die res van die web. Afhangende van die probleem, kan ons dit dalk regmaak (soek eers en maak dan 'n probleem oop indien nodig). Ons is egter geneig om dit te ignoreer, aangesien dit dikwels geen direkte oplossing het nie, behalwe hackige oplossings.
Sticky :hover/ :focusop iOS
Alhoewel :hoverdit nie op die meeste raaktoestelle moontlik is nie, boots iOS hierdie gedrag na, wat lei tot "taai" sweefstyle wat voortduur nadat op een element getik is. Hierdie sweefstyle word slegs verwyder wanneer gebruikers op 'n ander element tik. Hierdie gedrag word as grootliks ongewens beskou en blyk nie 'n probleem op Android- of Windows-toestelle te wees nie.
Regdeur ons v4 alfa- en beta-vrystellings het ons onvolledige en kommentaarkode ingesluit om in te teken op 'n medianavraagstuk wat sweefstyle sal deaktiveer in raaktoestelblaaiers wat sweef naboots. Hierdie werk is nooit volledig voltooi of geaktiveer nie, maar om volledige breek te vermy, het ons gekies om hierdie shim af te sien en die mixins as kortpaaie vir die pseudo-klasse te hou.
Drukwerk
Selfs in sommige moderne blaaiers kan druk eienaardig wees.
Vanaf Safari v8.0 kan die gebruik van die vaste-breedteklas .containerveroorsaak dat Safari 'n buitengewoon klein lettergrootte gebruik wanneer dit druk. Sien uitgawe #14868 en WebKit-fout #138192 vir meer besonderhede. Een moontlike oplossing is die volgende CSS:
@media print {
.container {
width: auto;
}
}
Android voorraad blaaier
Uit die boks word Android 4.1 (en selfs 'n paar nuwer vrystellings blykbaar) saam met die blaaier-toepassing gestuur as die standaard webblaaier van keuse (teenoor Chrome). Ongelukkig het die blaaier-toepassing baie foute en teenstrydighede met CSS in die algemeen.
Kies spyskaart
Op <select>elemente sal die Android-aandeelblaaier nie die sykontroles vertoon as daar 'n border-radiusen/of bordertoegepas is nie. (Sien hierdie StackOverflow-vraag vir besonderhede.) Gebruik die kodestuk hieronder om die gewraakte CSS te verwyder en die <select>as 'n ongestileerde element op die Android-aandeelblaaier weer te gee. Die gebruikeragent snuif vermy inmenging met Chrome-, Safari- en Mozilla-blaaiers.
<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>
Wil jy 'n voorbeeld sien? Kyk na hierdie JS Bin-demo .
Valideerders
Ten einde die beste moontlike ervaring aan ou en foutiewe blaaiers te bied, gebruik Bootstrap CSS-blaaierhacks op verskeie plekke om spesiale CSS op sekere blaaierweergawes te teiken om foute in die blaaiers self te omseil. Hierdie hacks veroorsaak verstaanbaar dat CSS-valideerders kla dat hulle ongeldig is. Op 'n paar plekke gebruik ons ook bloeiende CSS-kenmerke wat nog nie ten volle gestandaardiseer is nie, maar dit word bloot vir progressiewe verbetering gebruik.
Hierdie valideringswaarskuwings maak nie saak in die praktyk nie, aangesien die nie-gekapte gedeelte van ons CSS ten volle valideer en die hacky gedeeltes nie inmeng met die behoorlike funksionering van die nie-hacky gedeelte nie, vandaar hoekom ons hierdie spesifieke waarskuwings doelbewus ignoreer.
Ons HTML-dokumente het eweneens 'n paar onbenullige en onbelangrike HTML-valideringswaarskuwings as gevolg van ons insluiting van 'n oplossing vir 'n sekere Firefox-fout .