Prehliadače a zariadenia
Získajte informácie o prehliadačoch a zariadeniach, od moderných po staré, ktoré podporuje Bootstrap, vrátane známych zvláštností a chýb pre každý z nich.
Podporované prehliadače
Bootstrap podporuje najnovšie stabilné vydania všetkých hlavných prehliadačov a platforiem. V systéme Windows podporujeme Internet Explorer 10-11 / Microsoft Edge .
Alternatívne prehliadače, ktoré používajú najnovšiu verziu WebKit, Blink alebo Gecko, či už priamo alebo cez webové rozhranie API platformy, nie sú výslovne podporované. Bootstrap by sa však mal (vo väčšine prípadov) správne zobrazovať a fungovať aj v týchto prehliadačoch. Podrobnejšie informácie o podpore sú uvedené nižšie.
Našu podporovanú škálu prehliadačov a ich verzií nájdete v našom.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
Na spracovanie zamýšľanej podpory prehliadača prostredníctvom predpôn CSS používame Autoprefixer , ktorý na správu týchto verzií prehliadača používa zoznam prehliadačov. Informácie o tom, ako integrovať tieto nástroje do vašich projektov, nájdete v ich dokumentácii.
Mobilné zariadenia
Všeobecne povedané, Bootstrap podporuje najnovšie verzie predvolených prehliadačov každej hlavnej platformy. Upozorňujeme, že proxy prehliadače (ako Opera Mini, Turbo režim Opera Mobile, UC Browser Mini, Amazon Silk) nie sú podporované.
| Chrome | Firefox | Safari | Prehliadač Android a WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Podporované | Podporované | N/A | Podporovaný Android v5.0+ | Podporované |
| iOS | Podporované | Podporované | Podporované | N/A | Podporované |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Podporované |
Desktopové prehliadače
Podobne sú podporované najnovšie verzie väčšiny prehliadačov pre stolné počítače.
| Chrome | Firefox | internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Podporované | Podporované | N/A | Podporované | Podporované | Podporované |
| Windows | Podporované | Podporované | Podporované, IE10+ | Podporované | Podporované | Nie je podporované |
V prípade Firefoxu okrem najnovšieho normálneho stabilného vydania podporujeme aj najnovšiu verziu Firefoxu s rozšírenou podporou (ESR) .
Neoficiálne by mal Bootstrap vyzerať a správať sa dostatočne dobre v prehliadačoch Chromium a Chrome pre Linux, Firefox pre Linux a Internet Explorer 9, hoci nie sú oficiálne podporované.
Zoznam niektorých chýb prehliadača, s ktorými sa musí Bootstrap potýkať, nájdete v našej Nástenke s chybami prehliadača .
internet Explorer
Internet Explorer 10+ je podporovaný; IE9 a nižšie nie je. Upozorňujeme, že niektoré vlastnosti CSS3 a prvky HTML5 nie sú plne podporované v IE10 alebo vyžadujú pre plnú funkčnosť vlastnosti s predponou. Podrobnosti o podpore funkcií CSS3 a HTML5 v prehliadači nájdete na stránke Môžem použiť.... Ak potrebujete podporu IE8-9, použite Bootstrap 3.
Modály a rozbaľovacie zoznamy v mobile
Pretečenie a rolovanie
Podpora pre overflow: hidden;prvok <body>je v systémoch iOS a Android dosť obmedzená. Za týmto účelom, keď prejdete za hornú alebo spodnú časť modálu v jednom z prehliadačov týchto zariadení, <body>obsah sa začne posúvať. Pozrite si chybu Chrome č. 175502 (opravená v Chrome v40) a chybu WebKit č. 153852 .
iOS textové polia a posúvanie
Od iOS 9.2, keď je modálny režim otvorený, ak je prvý dotyk posúvacieho gesta v rámci textu <input>alebo <textarea>, <body>bude sa posúvať obsah pod modálom namiesto samotného modálu. Pozrite si chybu WebKit č. 153856 .
Rozbaľovacie ponuky navigačného panela
Prvok .dropdown-backdropsa nepoužíva v systéme iOS v navigácii z dôvodu zložitosti indexovania z. Ak teda chcete zatvoriť rozbaľovacie ponuky v navigačných paneloch, musíte priamo kliknúť na prvok rozbaľovacej ponuky (alebo na akýkoľvek iný prvok, ktorý spustí udalosť kliknutia v systéme iOS ).
Priblíženie prehliadača
Približovanie stránky nevyhnutne predstavuje artefakty vykresľovania v niektorých komponentoch, a to v Bootstrape aj vo zvyšku webu. V závislosti od problému ho môžeme vyriešiť (najskôr vyhľadajte a v prípade potreby otvorte problém). Máme však tendenciu ich ignorovať, pretože často nemajú žiadne priame riešenie okrem hackingových riešení.
Sticky :hover/ :focusna iOS
Hoci :hoverto na väčšine dotykových zariadení nie je možné, iOS toto správanie emuluje, výsledkom čoho sú „lepkavé“ štýly prechodu, ktoré pretrvávajú aj po klepnutí na jeden prvok. Tieto štýly kurzora sa odstránia iba vtedy, keď používatelia klepnú na iný prvok. Toto správanie sa považuje do značnej miery za nežiaduce a zdá sa, že nepredstavuje problém na zariadeniach so systémom Android alebo Windows.
Vo všetkých našich verziách alfa a beta verzie v4 sme zahrnuli neúplný a komentovaný kód na aktiváciu podložky dopytu médií, ktorá by deaktivovala štýly vznášania v prehliadačoch dotykových zariadení, ktoré emulujú vznášanie sa. Táto práca nebola nikdy úplne dokončená ani aktivovaná, ale aby sme sa vyhli úplnému rozbitiu, rozhodli sme sa túto podložku zamietnuť a ponechať mixiny ako skratky pre pseudotriedy.
Tlač
Dokonca aj v niektorých moderných prehliadačoch môže byť tlač nepredvídateľná.
Od verzie Safari 8.0 môže použitie triedy s pevnou šírkou .containerspôsobiť, že Safari pri tlači použije nezvyčajne malú veľkosť písma. Ďalšie podrobnosti nájdete vo vydaní č. 14868 a chybe WebKit č. 138192 . Jedným z možných riešení je nasledujúci CSS:
@media print {
.container {
width: auto;
}
}
Burzový prehliadač Android
Po vybalení sa Android 4.1 (a dokonca aj niektoré novšie vydania zjavne) dodáva s aplikáciou Prehliadač ako predvoleným webovým prehliadačom (na rozdiel od prehliadača Chrome). Aplikácia Prehliadač má bohužiaľ veľa chýb a nezrovnalostí s CSS vo všeobecnosti.
Vyberte ponuku
Na <select>prvkoch nebude prehliadač akcií Android zobrazovať bočné ovládacie prvky, ak je border-radiusa/alebo borderaplikované. (Podrobnosti nájdete v tejto otázke StackOverflow .) Pomocou úryvku kódu nižšie odstráňte nevhodný CSS a vykreslite <select>prvok ako neštylizovaný prvok v prehliadači Android. Čuchanie používateľského agenta zabraňuje interferencii s prehliadačmi Chrome, Safari a 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>
Chcete vidieť príklad? Pozrite si toto demo JS Bin .
Validátori
S cieľom poskytnúť najlepší možný zážitok starým a chybným prehliadačom používa Bootstrap na niekoľkých miestach hacky prehliadača CSS na zacielenie špeciálnych CSS na určité verzie prehliadačov, aby obišiel chyby v samotných prehliadačoch. Tieto hacky pochopiteľne spôsobujú, že validátory CSS sa sťažujú, že sú neplatné. Na niekoľkých miestach používame aj špičkové funkcie CSS, ktoré ešte nie sú úplne štandardizované, ale používajú sa výlučne na progresívne vylepšenie.
Tieto upozornenia na overenie v praxi nie sú dôležité, pretože nehacknutá časť nášho CSS sa plne overuje a hacknuté časti nezasahujú do správneho fungovania nehacknutej časti, preto tieto konkrétne upozornenia zámerne ignorujeme.
Naše dokumenty HTML tiež obsahujú triviálne a bezvýznamné upozornenia na overenie kódu HTML, pretože sme zahrnuli riešenie pre určitú chybu Firefoxu .