Naršyklės ir įrenginiai
Sužinokite apie naršykles ir įrenginius (nuo šiuolaikinių iki senų), kuriuos palaiko „Bootstrap“, įskaitant žinomus kiekvienos jų ypatumus ir klaidas.
Palaikomos naršyklės
„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ų.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
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.
Mobilieji įrenginiai
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 |
Stalinių kompiuterių naršyklės
Panašiai palaikomos ir naujausios daugumos darbalaukio naršyklių versijos.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Palaikoma | Palaikoma | N/A | Palaikoma | 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 .
Internet Explorer
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.
Modalai ir išskleidžiamieji meniu mobiliesiems
Perpildymas ir slinkimas
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 .
iOS teksto laukai ir slinkimas
<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 .
Naršymo juostos išskleidžiamieji meniu
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“ ).
Naršyklės mastelio keitimas
Keičiant puslapio mastelį, kai kuriuose komponentuose, tiek 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.
Lipni :hover/ :focus„iOS“.
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ą. Manoma, kad toks elgesys iš esmės nepageidautinas ir neatrodo, kad problema „Android“ ar „Windows“ įrenginiuose.
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.
Spausdinimas
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;
}
}
Android akcijų naršyklė
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ų.
Pasirinkite meniu
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ą .
Validatoriai
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 negalioja. 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įlaužta mūsų CSS dalis visiškai patvirtinama, o įsilaužusios dalys netrukdo tinkamai neveikiančios dalies veikimui, 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ą .