Brskalniki in naprave
Izvedite več o brskalnikih in napravah, od sodobnih do starih, ki jih podpira Bootstrap, vključno z znanimi posebnostmi in napakami za vsakega.
Podprti brskalniki
Bootstrap podpira najnovejše, stabilne izdaje vseh glavnih brskalnikov in platform. V sistemu Windows podpiramo Internet Explorer 10-11 / Microsoft Edge .
Alternativni brskalniki, ki uporabljajo najnovejšo različico WebKit, Blink ali Gecko, neposredno ali prek API-ja spletnega pogleda platforme, niso izrecno podprti. Vendar bi se moral Bootstrap (v večini primerov) pravilno prikazati in delovati tudi v teh brskalnikih. Podrobnejše informacije o podpori so navedene spodaj.
Našo podprto paleto brskalnikov in njihovih različic najdete v našem.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
Autoprefixer uporabljamo za obravnavanje predvidene podpore brskalnika prek predpon CSS, ki uporablja seznam brskalnikov za upravljanje teh različic brskalnika. Oglejte si njihovo dokumentacijo, kako integrirati ta orodja v svoje projekte.
Mobilne naprave
Na splošno Bootstrap podpira najnovejše različice privzetih brskalnikov vsake glavne platforme. Upoštevajte, da brskalniki proxy (kot so Opera Mini, Turbo način Opera Mobile, UC Browser Mini, Amazon Silk) niso podprti.
| Chrome | Firefox | Safari | Brskalnik Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Podprto | Podprto | N/A | Android v5.0+ podprt | Podprto |
| iOS | Podprto | Podprto | Podprto | N/A | Podprto |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Podprto |
Namizni brskalniki
Podobno so podprte najnovejše različice večine namiznih brskalnikov.
| Chrome | Firefox | internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Podprto | Podprto | N/A | Podprto | Podprto | Podprto |
| Windows | Podprto | Podprto | Podprto, IE10+ | Podprto | Podprto | Ne podpira |
Za Firefox poleg najnovejše normalne stabilne izdaje podpiramo tudi najnovejšo različico Firefoxa z razširjeno podporo (ESR) .
Neuradno naj bi Bootstrap izgledal in se dovolj dobro obnašal v Chromiumu in Chromu za Linux, Firefoxu za Linux in Internet Explorerju 9, čeprav uradno nista podprta.
Za seznam nekaterih hroščev v brskalniku, s katerimi se mora spopasti Bootstrap, si oglejte naš Zid hroščev v brskalniku .
internet Explorer
Podprt je Internet Explorer 10+; IE9 in nižje ni. Upoštevajte, da nekatere lastnosti CSS3 in elementi HTML5 niso v celoti podprti v IE10 ali pa zahtevajo predpone lastnosti za polno funkcionalnost. Obiščite Ali lahko uporabim… za podrobnosti o podpori brskalnika za funkcije CSS3 in HTML5. Če potrebujete podporo za IE8-9, uporabite Bootstrap 3.
Modali in spustni meniji na mobilniku
Prelivanje in drsenje
Podpora za overflow: hidden;element <body>je v sistemih iOS in Android precej omejena. V ta namen, ko se pomaknete mimo vrha ali dna modala v katerem koli od brskalnikov teh naprav, se bo <body>vsebina začela pomikati. Oglejte si napako Chrome #175502 (odpravljeno v Chromu v40) in napako WebKit #153852 .
Besedilna polja iOS in drsenje
Od iOS 9.2, medtem ko je modal odprt, se bo, če je začetni dotik poteze drsenja znotraj meje besedila <input>ali <textarea>, <body>pomikala vsebina pod modalom namesto samega modala. Oglejte si napako WebKit #153856 .
Spustni meni Navbar
Element .dropdown-backdropse v sistemu iOS ne uporablja v navigaciji zaradi zapletenosti z-indeksiranja. Če želite zapreti spustne menije v vrsticah za krmarjenje, morate neposredno klikniti spustni element (ali kateri koli drug element, ki bo sprožil dogodek klika v sistemu iOS ).
Povečanje brskalnika
Povečevanje strani neizogibno predstavlja artefakte upodabljanja v nekaterih komponentah, tako v Bootstrapu kot preostalem spletu. Glede na težavo jo bomo morda lahko odpravili (najprej poiščite in nato po potrebi odprite težavo). Vendar jih običajno ignoriramo, saj pogosto nimajo neposredne rešitve, razen hekerskih rešitev.
Sticky :hover/ :focusv sistemu iOS
Čeprav :hoverto ni mogoče na večini naprav na dotik, iOS posnema to vedenje, kar ima za posledico »lepljive« sloge lebdenja, ki ostanejo po dotiku enega elementa. Ti slogi lebdenja se odstranijo samo, ko uporabniki tapnejo drug element. To vedenje velja za večinoma nezaželeno in zdi se, da ni težava v napravah Android ali Windows.
Skozi naše izdaje v4 alfa in beta smo vključili nepopolno in komentirano kodo za izbiro medijske poizvedbe, ki bi onemogočila sloge lebdenja v brskalnikih naprav na dotik, ki posnemajo lebdenje. To delo ni bilo nikoli v celoti dokončano ali omogočeno, a da bi se izognili popolnemu zlomu, smo se odločili, da opustimo to podlogo in obdržimo miksine kot bližnjice za psevdo-razrede.
Tiskanje
Tudi v nekaterih sodobnih brskalnikih je lahko tiskanje nenavadno.
Od Safarija v8.0 lahko uporaba razreda s fiksno širino .containerpovzroči, da Safari pri tiskanju uporablja nenavadno majhno velikost pisave. Za več podrobnosti si oglejte težavo #14868 in napako WebKit #138192 . Ena možna rešitev je naslednji CSS:
@media print {
.container {
width: auto;
}
}
Standardni brskalnik Android
Android 4.1 (in očitno celo nekatere novejše izdaje) že takoj prejmejo aplikacijo Browser kot privzeti izbrani spletni brskalnik (v nasprotju s Chromom). Na žalost ima aplikacija Brskalnik veliko napak in nedoslednosti s CSS na splošno.
Izberite meni
Na <select>elementih standardni brskalnik Android ne bo prikazal stranskih kontrolnikov, če je uporabljen border-radiusin/ali border. (Za podrobnosti si oglejte to vprašanje StackOverflow .) Uporabite spodnji delček kode, da odstranite žaljivi CSS in upodabljate <select>element kot element brez sloga v brskalniku zaloge Android. Vohanje uporabniškega agenta se izogne motnjam v brskalnikih Chrome, Safari in 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>
Želite videti primer? Oglejte si to predstavitev JS Bin .
Validatorji
Da bi zagotovil najboljšo možno izkušnjo starim brskalnikom in brskalnikom z napakami, Bootstrap na več mestih uporablja vdore v brskalnike CSS , da cilja posebne CSS na določene različice brskalnikov, da se izogne napakam v samih brskalnikih. Ti vdori razumljivo povzročijo, da se validatorji CSS pritožujejo, da so neveljavni. Na nekaj mestih uporabljamo tudi najsodobnejše funkcije CSS, ki še niso povsem standardizirane, vendar se uporabljajo zgolj za postopno izboljšavo.
Ta opozorila pri preverjanju veljavnosti v praksi niso pomembna, saj del našega CSS-ja, ki ni vdor, v celoti preveri veljavnost in deli, ki so vdori, ne motijo pravilnega delovanja dela, ki ni vdor, zato namenoma ignoriramo ta posebna opozorila.
Naši dokumenti HTML prav tako vsebujejo nekaj trivialnih in nepomembnih opozoril o preverjanju veljavnosti HTML, ker smo vključili rešitev za določeno napako Firefoxa .