Prohlížeče a zařízení
Přečtěte si o prohlížečích a zařízeních, od moderních po staré, které podporuje Bootstrap, včetně známých zvláštností a chyb pro každý z nich.
Podporované prohlížeče
Bootstrap podporuje nejnovější stabilní verze všech hlavních prohlížečů a platforem. V systému Windows podporujeme Internet Explorer 10-11 / Microsoft Edge .
Alternativní prohlížeče, které používají nejnovější verzi WebKit, Blink nebo Gecko, ať už přímo nebo prostřednictvím webového rozhraní API platformy, nejsou výslovně podporovány. Bootstrap by se však měl (ve většině případů) zobrazovat a fungovat správně i v těchto prohlížečích. Podrobnější informace o podpoře jsou uvedeny níže.
Naši podporovanou řadu prohlížečů a jejich verzí najdete v 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
Ke správě zamýšlené podpory prohlížeče prostřednictvím předpon CSS používáme Autoprefixer , který ke správě těchto verzí prohlížeče používá Browserslist . Informace o tom, jak integrovat tyto nástroje do vašich projektů, najdete v jejich dokumentaci.
Mobilní zařízení
Obecně řečeno, Bootstrap podporuje nejnovější verze výchozích prohlížečů každé hlavní platformy. Upozorňujeme, že proxy prohlížeče (jako je Opera Mini, režim Turbo Opera Mobile, UC Browser Mini, Amazon Silk) nejsou podporovány.
| Chrome | Firefox | Safari | Prohlížeč Android a WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Podporováno | Podporováno | N/A | Podporován Android v5.0+ | Podporováno |
| iOS | Podporováno | Podporováno | Podporováno | N/A | Podporováno |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Podporováno |
Desktopové prohlížeče
Podobně jsou podporovány nejnovější verze většiny prohlížečů pro stolní počítače.
| Chrome | Firefox | internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Podporováno | Podporováno | N/A | Podporováno | Podporováno | Podporováno |
| Okna | Podporováno | Podporováno | Podporováno, IE10+ | Podporováno | Podporováno | Není podporováno |
Pro Firefox podporujeme kromě poslední normální stabilní verze také nejnovější verzi Firefoxu s rozšířenou podporou (ESR) .
Neoficiálně by měl Bootstrap vypadat a chovat se dostatečně dobře v Chromiu a Chrome pro Linux, Firefox pro Linux a Internet Explorer 9, ačkoli nejsou oficiálně podporovány.
Seznam některých chyb prohlížeče, se kterými se musí Bootstrap potýkat, naleznete v naší Zeď s chybami prohlížeče .
internet Explorer
Je podporován Internet Explorer 10+; IE9 a nižší nejsou. Uvědomte si prosím, že některé vlastnosti CSS3 a prvky HTML5 nejsou v IE10 plně podporovány nebo pro plnou funkčnost vyžadují vlastnosti s předponou. Podrobnosti o podpoře funkcí CSS3 a HTML5 v prohlížeči najdete na stránce Mohu použít… . Pokud požadujete podporu IE8-9, použijte Bootstrap 3.
Modály a rozevírací seznamy na mobilu
Přetečení a rolování
Podpora pro overflow: hidden;prvek <body>je v iOS a Androidu značně omezená. Za tímto účelem, když přejdete za horní nebo dolní část modálu v prohlížeči kteréhokoli z těchto zařízení, <body>obsah se začne posouvat. Viz chyba Chrome #175502 (opravená v Chrome v40) a chyba WebKit #153852 .
iOS textová pole a rolování
Od iOS 9.2 platí, že když je modal otevřený, pokud je počáteční dotyk gesta posouvání v rámci textu <input>nebo <textarea>, <body>bude se posouvat obsah pod modalem namísto samotného modalu. Viz chyba WebKit #153856 .
Rozbalovací nabídky navigační lišty
Prvek .dropdown-backdropse nepoužívá na iOS v navigaci kvůli složitosti z-indexování. Chcete-li tedy zavřít rozevírací seznamy v navbarech, musíte přímo kliknout na prvek rozevíracího seznamu (nebo jakýkoli jiný prvek, který spustí událost kliknutí v systému iOS ).
Přiblížení prohlížeče
Přiblížení stránky nevyhnutelně představuje artefakty vykreslování v některých komponentách, jak v Bootstrapu, tak ve zbytku webu. V závislosti na problému můžeme být schopni jej opravit (nejprve vyhledejte a v případě potřeby otevřete problém). Máme však tendenci je ignorovat, protože často nemají jiné přímé řešení než hacky.
Sticky :hover/ :focusna iOS
I když :hoverto na většině dotykových zařízení není možné, iOS toto chování emuluje, což má za následek „lepivé“ styly přechodu, které přetrvávají i po klepnutí na jeden prvek. Tyto styly kurzoru jsou odstraněny pouze tehdy, když uživatelé klepnou na jiný prvek. Toto chování je považováno za převážně nežádoucí a zdá se, že nepředstavuje problém na zařízeních Android nebo Windows.
Ve všech našich verzích alfa a beta verze 4 jsme zahrnuli neúplný a okomentovaný kód pro přihlášení do shim dotazu na média, který by deaktivoval styly vznášení v prohlížečích dotykových zařízení, které emulují vznášení. Tato práce nebyla nikdy plně dokončena ani aktivována, ale abychom se vyhnuli úplnému rozbití, rozhodli jsme se tuto podložku zavrhnout a ponechat mixiny jako zkratky pro pseudotřídy.
Tisk
I v některých moderních prohlížečích může být tisk nepředvídatelný.
Od Safari v8.0 může použití třídy s pevnou šířkou .containerzpůsobit, že Safari při tisku použije neobvykle malou velikost písma. Další podrobnosti naleznete v tématu č. 14868 a chybě WebKit č. 138192 . Jedním z možných řešení je následující CSS:
@media print {
.container {
width: auto;
}
}
Burzovní prohlížeč Android
Po vybalení je Android 4.1 (a dokonce i některé novější verze zjevně) dodáván s aplikací Browser jako výchozím webovým prohlížečem (na rozdíl od Chrome). Bohužel má aplikace Prohlížeč mnoho chyb a nesrovnalostí s CSS obecně.
Vyberte nabídku
U <select>prvků nebude prohlížeč akcií Android zobrazovat boční ovládací prvky, pokud je border-radiusa/nebo borderpoužito. (Podrobnosti naleznete v této otázce StackOverflow .) Pomocí níže uvedeného úryvku kódu odstraňte nevhodný CSS a vykreslete jej <select>jako prvek bez stylu v prohlížeči Android. Číhání uživatelského agenta zabraňuje interferenci s prohlížeči 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 vidět příklad? Podívejte se na toto demo JS Bin .
Validátory
Aby Bootstrap poskytoval starým a zabugovaným prohlížečům co nejlepší zkušenosti, používá na několika místech hacky prohlížeče CSS k cílení speciálních CSS na určité verze prohlížečů, aby tak odstranil chyby v samotných prohlížečích. Tyto hacky pochopitelně způsobují, že validátoři CSS si stěžují, že jsou neplatné. Na několika místech také používáme nejběžnější funkce CSS, které ještě nejsou plně standardizovány, ale používají se čistě pro postupné vylepšování.
Tato ověřovací varování nejsou v praxi důležitá, protože nehackovaná část našeho CSS se plně ověřuje a hackované části nenarušují správné fungování nehackované části, proto tato konkrétní varování záměrně ignorujeme.
Naše HTML dokumenty mají rovněž některá triviální a nedůležitá upozornění na ověření HTML kvůli našemu zahrnutí řešení pro určitou chybu Firefoxu .