Source

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šempackage.json :

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "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 N/A 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. Je najbolj stabilna različica naše kode in jo naša ekipa še vedno podpira za kritične popravke napak in spremembe dokumentacije. Vendar mu ne bodo dodane nove funkcije.

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 .

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 .