Source

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.

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ų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.

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 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 .

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 “. 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ų.

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 .

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 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.

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ą. 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.

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 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ą .