Preglednici i uređaji
Saznajte više o preglednicima i uređajima, od modernih do starih, koje podržava Bootstrap, uključujući poznate nedostatke i pogreške za svaki od njih.
Podržani preglednici
Bootstrap podržava najnovija, stabilna izdanja svih glavnih preglednika i platformi. U sustavu Windows podržavamo Internet Explorer 10-11 / Microsoft Edge .
Alternativni preglednici koji koriste najnoviju verziju WebKita, Blinka ili Gecka, bilo izravno ili putem API-ja za web pregled platforme, nisu izričito podržani. Međutim, Bootstrap bi (u većini slučajeva) trebao ispravno prikazivati i funkcionirati iu ovim preglednicima. Konkretnije informacije o podršci navedene su u nastavku.
Naš podržani raspon preglednika i njihovih verzija možete pronaći u 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
Koristimo Autoprefixer za rukovanje predviđenom podrškom preglednika putem CSS prefiksa, koji koristi Browserslist za upravljanje ovim verzijama preglednika. Posavjetujte se s njihovom dokumentacijom kako integrirati ove alate u svoje projekte.
Mobilni uredaji
Općenito govoreći, Bootstrap podržava najnovije verzije zadanih preglednika svake glavne platforme. Imajte na umu da proxy preglednici (kao što su Opera Mini, Turbo način rada Opera Mobile, UC Browser Mini, Amazon Silk) nisu podržani.
| Krom | Firefox | Safari | Android preglednik i web-prikaz | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Podržano | Podržano | N/A | Android v5.0+ podržan | Podržano |
| iOS | Podržano | Podržano | Podržano | N/A | Podržano |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Podržano |
Preglednici stolnih računala
Slično tome, podržane su najnovije verzije većine preglednika stolnih računala.
| Krom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Podržano | Podržano | N/A | Podržano | Podržano | Podržano |
| Windows | Podržano | Podržano | Podržano, IE10+ | Podržano | Podržano | Nije podržano |
Za Firefox, uz najnovije normalno stabilno izdanje, također podržavamo najnoviju verziju Firefoxa s proširenom podrškom (ESR) .
Neslužbeno, Bootstrap bi trebao izgledati i ponašati se dovoljno dobro u Chromiumu i Chromeu za Linux, Firefoxu za Linux i Internet Exploreru 9, iako nisu službeno podržani.
Za popis nekih grešaka u pregledniku s kojima se Bootstrap mora uhvatiti u koštac, pogledajte naš Zid grešaka u pregledniku .
Internet Explorer
Podržan je Internet Explorer 10+; IE9 i niže nije. Imajte na umu da neka CSS3 svojstva i HTML5 elementi nisu u potpunosti podržani u IE10 ili zahtijevaju prefiksirana svojstva za punu funkcionalnost. Posjetite Mogu li koristiti… za detalje o podršci preglednika za značajke CSS3 i HTML5. Ako vam je potrebna podrška za IE8-9, koristite Bootstrap 3.
Modali i padajući izbornik na mobitelu
Prelijevanje i pomicanje
Podrška za overflow: hidden;on <body>element prilično je ograničena u iOS-u i Androidu. U tu svrhu, kada se pomaknete preko vrha ili dna modala u bilo kojem od preglednika tih uređaja, <body>sadržaj će se početi pomicati. Pogledajte Chrome bug #175502 (ispravljen u Chrome v40) i WebKit bug #153852 .
iOS tekstualna polja i pomicanje
Od iOS-a 9.2, dok je modal otvoren, ako je početni dodir geste pomicanja unutar granice teksta <input>ili <textarea>, <body>sadržaj ispod modala će se pomicati umjesto samog modala. Pogledajte WebKit bug #153856 .
Padajući izbornik navigacijske trake
Element .dropdown-backdropse ne koristi na iOS-u u navigaciji zbog složenosti z-indeksiranja. Dakle, da biste zatvorili padajuće izbornike u navigacijskim trakama, morate izravno kliknuti element padajućeg izbornika (ili bilo koji drugi element koji će aktivirati događaj klika u iOS -u ).
Zumiranje preglednika
Zumiranje stranice neizbježno predstavlja artefakte renderiranja u nekim komponentama, kako u Bootstrapu tako i na ostatku weba. Ovisno o problemu, možda ćemo ga moći riješiti (prvo pretražite, a zatim otvorite problem ako je potrebno). Međutim, skloni smo ih ignorirati jer često nemaju izravno rješenje osim hakiranih rješenja.
Ljepljivo :hover/ :focusna iOS -u
Iako :hoverto nije moguće na većini uređaja osjetljivih na dodir, iOS emulira ovo ponašanje, što rezultira "ljepljivim" stilovima lebdenja koji ostaju nakon dodirivanja jednog elementa. Ovi stilovi lebdenja uklanjaju se samo kada korisnici dodirnu drugi element. Ovo se ponašanje smatra uglavnom nepoželjnim i čini se da nije problem na Android ili Windows uređajima.
Kroz naša v4 alfa i beta izdanja, uključili smo nepotpuni i komentirani kod za odabir medijskog upita koji bi onemogućio stilove lebdenja u preglednicima uređaja na dodir koji emuliraju lebdenje. Ovaj posao nikada nije u potpunosti dovršen niti omogućen, ali da bismo izbjegli potpuni kvar, odlučili smo obustaviti ovaj shim i zadržati miksine kao prečace za pseudo-klase.
Ispis
Čak iu nekim modernim preglednicima ispis može biti neobičan.
Od Safarija v8.0, korištenje klase fiksne širine .containermože uzrokovati da Safari koristi neuobičajeno malu veličinu fonta prilikom ispisa. Pogledajte problem #14868 i WebKit bug #138192 za više detalja. Jedno moguće rješenje je sljedeći CSS:
@media print {
.container {
width: auto;
}
}
Android dionički preglednik
Izvan kutije, Android 4.1 (a čak i neka novija izdanja očito) isporučuju se s aplikacijom Browser kao zadanim web preglednikom po izboru (za razliku od Chromea). Nažalost, aplikacija Preglednik općenito ima puno grešaka i nedosljednosti s CSS-om.
Odaberite izbornik
Na <select>elementima, Android dionički preglednik neće prikazati bočne kontrole ako postoji border-radiusi/ili borderprimijenjeno. (Pogledajte ovo StackOverflow pitanje za pojedinosti.) Upotrijebite isječak koda u nastavku da biste uklonili uvredljivi CSS i <select>prikazali kao element bez stila u pregledniku Android standarda. Njuškanje korisničkog agenta izbjegava smetnje s preglednicima Chrome, Safari i 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 li vidjeti primjer? Pogledajte ovaj demo JS Bin .
Validatori
Kako bi pružio najbolje moguće iskustvo starim preglednicima s greškama, Bootstrap koristi hakove CSS preglednika na nekoliko mjesta kako bi ciljao poseban CSS na određene verzije preglednika kako bi zaobišao pogreške u samim preglednicima. Ovi hakovi razumljivo uzrokuju da se CSS validatori žale da su nevažeći. Na nekoliko mjesta također koristimo najnovije CSS značajke koje još nisu u potpunosti standardizirane, ali se koriste isključivo za progresivno poboljšanje.
Ova upozorenja za provjeru valjanosti nisu bitna u praksi budući da nehakirani dio našeg CSS-a u potpunosti provjerava valjanost i hakirani dijelovi ne ometaju ispravno funkcioniranje nehakiranog dijela, stoga namjerno ignoriramo ova posebna upozorenja.
Naši HTML dokumenti također imaju neka trivijalna i beznačajna upozorenja o provjeri valjanosti HTML-a zbog našeg uključivanja rješenja za određenu pogrešku Firefoxa .