Source

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.

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 N/A 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 požadujete podporu IE8-9, použite Bootstrap 3. Je to najstabilnejšia verzia nášho kódu a náš tím ju stále podporuje pri opravách kritických chýb a zmenách dokumentácie. Nebudú do nej však pridané žiadne nové funkcie.

Modály a rozbaľovacie zoznamy v mobile

Pretečenie a rolovanie

Podpora overflow: hidden;prvku <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 rolovanie

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 .

Prvok .dropdown-backdropsa nepoužíva v systéme iOS v navigácii kvôli 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

Zväčšovanie stránky nevyhnutne predstavuje artefakty vykresľovania v niektorých komponentoch, v Bootstrape aj vo zvyšku webu. V závislosti od problému ho možno budeme vedieť opraviť (najskôr vyhľadajte a potom 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 zakázala š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 poškodeniu, 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) 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 varovania pri overovaní nehrajú v praxi význam, 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 .