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.
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š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"
]
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.
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 |
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 | N/A | 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 .
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. To je najstabilnija verzija našeg koda i još uvijek je podržava naš tim za kritične ispravke grešaka i izmjene dokumentacije. Međutim, neće mu biti dodane nove značajke.
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 .
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 .
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 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.
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.
Č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;
}
}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.
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.
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 .