Naršyklės ir įrenginiai
Sužinokite apie naršykles ir įrenginius (nuo šiuolaikinių iki senų), kuriuos palaiko „Bootstrap“, įskaitant žinomas kiekvienos jų keistenybes ir klaidas.
„Bootstrap“ palaiko naujausius, stabilius visų pagrindinių naršyklių ir platformų leidimus. Sistemoje „Windows“ palaikome „Internet Explorer 10-11“ / „Microsoft Edge“ .
Alternatyvios naršyklės, kuriose naudojama naujausia „WebKit“, „Blink“ arba „Gecko“ versija, tiesiogiai arba per platformos žiniatinklio peržiūros API, nėra aiškiai palaikomos. Tačiau Bootstrap turėtų (daugeliu atvejų) tinkamai rodyti ir veikti šiose naršyklėse. Toliau pateikiama konkretesnė palaikymo informacija.
Mūsų palaikomų naršyklių asortimentą ir jų versijas rasite mūsųpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Naudojame Autoprefixer , kad galėtume tvarkyti numatytą naršyklės palaikymą naudojant CSS priešdėlius, o šioms naršyklės versijoms valdyti naudojamas naršyklių sąrašas. Peržiūrėkite jų dokumentus, kaip integruoti šiuos įrankius į savo projektus.
Paprastai kalbant, „Bootstrap“ palaiko naujausias kiekvienos pagrindinės platformos numatytųjų naršyklių versijas. Atminkite, kad tarpinio serverio naršyklės (pvz., „Opera Mini“, „Opera Mobile“ Turbo režimas, „UC Browser Mini“, „Amazon Silk“) nepalaikomos.
| Chrome | Firefox | Safari | „Android“ naršyklė ir „WebView“. | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Palaikoma | Palaikoma | N/A | Palaikoma Android v5.0+ | Palaikoma |
| iOS | Palaikoma | Palaikoma | Palaikoma | N/A | Palaikoma |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Palaikoma |
Panašiai palaikomos ir naujausios daugumos darbalaukio naršyklių versijos.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Palaikoma | Palaikoma | N/A | N/A | Palaikoma | Palaikoma |
| Windows | Palaikoma | Palaikoma | Palaikoma, IE10+ | Palaikoma | Palaikoma | Nepalaikomas |
Be naujausio įprasto stabilaus leidimo, „Firefox“ palaikome ir naujausią išplėstinio palaikymo leidimo (ESR) „Firefox“ versiją.
Neoficialiai „Bootstrap“ turėtų atrodyti ir veikti pakankamai gerai „Chromium“ ir „Chrome“, skirta „Linux“, „Firefox“, skirta „Linux“ ir „Internet Explorer 9“, nors jie oficialiai nepalaikomi.
Kai kurių naršyklės klaidų, su kuriomis turi kovoti „Bootstrap“, sąrašą rasite mūsų naršyklės klaidų sienoje .
Palaikoma „Internet Explorer 10+“; IE9 ir senesnės versijos nėra. Atminkite, kad kai kurios CSS3 ypatybės ir HTML5 elementai nėra visiškai palaikomi IE10 arba reikalauja, kad ypatybės būtų priešdėlinės, kad veiktų visos funkcijos. Norėdami gauti daugiau informacijos apie naršyklės CSS3 ir HTML5 funkcijų palaikymą, apsilankykite Ar galiu naudoti… .
Jei jums reikia IE8-9 palaikymo, naudokite „Bootstrap 3 “. Tai stabiliausia mūsų kodo versija, kurią vis dar palaiko mūsų komanda dėl kritinių klaidų pataisų ir dokumentacijos pakeitimų. Tačiau prie jo nebus pridėta jokių naujų funkcijų.
Elemento palaikymas overflow: hidden;„ <body>iOS“ ir „Android“ yra gana ribotas. Tuo tikslu, kai slinksite pro modalo viršų arba apačią bet kurioje iš šių įrenginių naršyklių, <body>turinys pradės slinkti. Žr . „ Chrome“ klaidą Nr. 175502 (ištaisyta „Chrome v40“) ir „ WebKit“ klaidą Nr. 153852 .
<input>Nuo 9.2 versijos iOS, kai modalas yra atidarytas, jei pradinis slinkties gesto prisilietimas yra teksto ar ribose, po modalu <textarea>esantis <body>turinys bus slinktas, o ne pats modalas. Žr . WebKit klaidą Nr. 153856 .
Elementas .dropdown-backdrop„iOS“ nenaudojamas navigacijoje dėl z indeksavimo sudėtingumo. Taigi, norėdami uždaryti naršymo juostų išskleidžiamuosius meniu, turite tiesiogiai spustelėti išskleidžiamąjį elementą (arba bet kurį kitą elementą, kuris suaktyvins paspaudimo įvykį sistemoje „iOS“ ).
Keičiant puslapio mastelį, kai kuriuose komponentuose, tiek sistemoje „Bootstrap“, tiek likusioje žiniatinklio dalyje, neišvengiamai atsiranda atvaizdavimo artefaktų. Atsižvelgdami į problemą, galime ją išspręsti (pirmiausia ieškokite ir, jei reikia, atidarykite problemą). Tačiau mes linkę į tai nepaisyti, nes jie dažnai neturi tiesioginio sprendimo, išskyrus įsisenėjusius sprendimus.
Nors :hovertai neįmanoma daugelyje jutiklinių įrenginių, „iOS“ imituoja šį elgesį, todėl atsiranda „lipni“ užvedimo stiliai, kurie išlieka ir palietus vieną elementą. Šie užvedimo stiliai pašalinami tik naudotojams palietus kitą elementą. Toks elgesys laikomas iš esmės nepageidautinu ir neatrodo, kad „Android“ ar „Windows“ įrenginiuose tai būtų problema.
Visuose 4 alfa ir beta versijų leidimuose įtraukėme neužbaigtą ir pakomentuotą kodą, skirtą pasirinkti medijos užklausos tarpiklį, kuris išjungtų užvedimo stilių jutiklinėse įrenginių naršyklėse, kurios imituoja užvedimą. Šis darbas niekada nebuvo visiškai baigtas arba įgalintas, tačiau norėdami išvengti visiško lūžio, nusprendėme atsisakyti šio tarpiklio ir palikti mišinius kaip pseudoklasių nuorodas.
Net kai kuriose šiuolaikinėse naršyklėse spausdinimas gali būti keistas.
Nuo 8.0 versijos Safari, naudojant fiksuoto pločio .containerklasę, spausdinant Safari gali būti naudojamas neįprastai mažas šriftas. Norėdami gauti daugiau informacijos, žr . leidimą Nr. 14868 ir „ WebKit“ klaidą Nr. 138192 . Vienas iš galimų sprendimo būdų yra šis CSS:
@media print {
.container {
width: auto;
}
}Iš pradžių „Android 4.1“ (ir, matyt, net kai kurie naujesni leidimai) pristatoma su Naršyklės programa kaip numatytoji pasirinkta žiniatinklio naršyklė (priešingai nei „Chrome“). Deja, naršyklės programoje yra daug klaidų ir apskritai CSS neatitikimų.
Elementuose <select>„Android“ atsargų naršyklė nerodys šoninių valdiklių, jei yra border-radiusir (arba) borderpritaikyti. (Išsamesnės informacijos ieškokite šiame „StackOverflow“ klausime .) Naudokite toliau pateiktą kodo fragmentą, kad pašalintumėte pažeidžiantį CSS ir <select>„Android“ atsargų naršyklėje pateiktumėte kaip nestiliautą elementą. Naudotojo agento uostymas leidžia išvengti „Chrome“, „Safari“ ir „Mozilla“ naršyklių trikdžių.
<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>Norite pamatyti pavyzdį? Peržiūrėkite šią JS Bin demonstraciją.
Siekdama suteikti geriausią įmanomą patirtį senoms ir klaidingoms naršyklėms, „Bootstrap“ keliose vietose naudoja CSS naršyklės įsilaužimus , kad tam tikroms naršyklės versijoms būtų pritaikytas specialus CSS, kad būtų išvengta pačių naršyklių klaidų. Dėl šių įsilaužimų CSS tikrintojai skundžiasi, kad jie neteisingi. Kai kuriose vietose taip pat naudojame pažangiausias CSS funkcijas, kurios dar nėra visiškai standartizuotos, tačiau jos naudojamos tik laipsniškam patobulinimui.
Šie patvirtinimo įspėjimai praktiškai neturi reikšmės, nes neįsilaužianti mūsų CSS dalis visiškai patvirtinama, o įsilaužusios dalys netrukdo tinkamai veikti neįsilaužančiai daliai, todėl mes sąmoningai ignoruojame šiuos konkrečius įspėjimus.
Mūsų HTML dokumentuose taip pat yra keletas nereikšmingų ir nereikšmingų HTML patvirtinimo įspėjimų, nes įtraukėme tam tikros „Firefox“ klaidos sprendimą .