Shfletuesit dhe pajisjet
Mësoni rreth shfletuesve dhe pajisjeve, nga moderne në të vjetra, që mbështeten nga Bootstrap, duke përfshirë veçoritë dhe defektet e njohura për secilin.
Shfletuesit e mbështetur
Bootstrap mbështet versionet më të fundit, të qëndrueshme të të gjithë shfletuesve dhe platformave kryesore. Në Windows, ne mbështesim Internet Explorer 10-11 / Microsoft Edge .
Shfletuesit alternativë që përdorin versionin më të fundit të WebKit, Blink ose Gecko, qoftë drejtpërdrejt ose nëpërmjet API-së së pamjes së uebit të platformës, nuk mbështeten në mënyrë eksplicite. Sidoqoftë, Bootstrap duhet (në shumicën e rasteve) të shfaqë dhe të funksionojë saktë edhe në këta shfletues. Informacione më specifike mbështetëse jepen më poshtë.
Mund të gjeni gamën tonë të mbështetur të shfletuesve dhe versionet e tyre në faqen tonë.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
Ne përdorim Autoprefixer për të trajtuar mbështetjen e synuar të shfletuesit nëpërmjet prefikseve CSS, i cili përdor listën e shfletuesve për të menaxhuar këto versione të shfletuesit. Konsultohuni me dokumentacionin e tyre se si t'i integroni këto mjete në projektet tuaja.
Pajisjet celulare
Në përgjithësi, Bootstrap mbështet versionet më të fundit të shfletuesve të paracaktuar të secilës platformë kryesore. Vini re se shfletuesit proxy (si Opera Mini, modaliteti Turbo i Opera Mobile, UC Browser Mini, Amazon Silk) nuk mbështeten.
| krom | Firefox | Safari | Shfletuesi Android dhe Pamja në Ueb | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Mbështetur | Mbështetur | N/A | Mbështetet Android v5.0+ | Mbështetur |
| iOS | Mbështetur | Mbështetur | Mbështetur | N/A | Mbështetur |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Mbështetur |
Shfletuesit e desktopit
Në mënyrë të ngjashme, versionet më të fundit të shumicës së shfletuesve të desktopit mbështeten.
| krom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Mbështetur | Mbështetur | N/A | Mbështetur | Mbështetur | Mbështetur |
| Dritaret | Mbështetur | Mbështetur | Mbështetur, IE10+ | Mbështetur | Mbështetur | Nuk mbështetet |
Për Firefox-in, përveç versionit më të fundit normal të qëndrueshëm, ne mbështesim gjithashtu versionin më të fundit të lëshimit të mbështetjes së zgjeruar (ESR) të Firefox-it.
Jozyrtarisht, Bootstrap duhet të duket dhe të sillet mjaft mirë në Chromium dhe Chrome për Linux, Firefox për Linux dhe Internet Explorer 9, megjithëse ato nuk mbështeten zyrtarisht.
Për një listë të disa gabimeve të shfletuesit me të cilat Bootstrap duhet të përballet, shihni murin tonë të gabimeve të shfletuesit .
Internet Explorer
Internet Explorer 10+ mbështetet; IE9 dhe poshtë nuk është. Ju lutemi, kini parasysh se disa veti CSS3 dhe elementë HTML5 nuk mbështeten plotësisht në IE10, ose kërkojnë veçori të prefiksuara për funksionalitet të plotë. Vizitoni Mund të përdor… për detaje mbi mbështetjen e shfletuesit të veçorive CSS3 dhe HTML5. Nëse keni nevojë për mbështetje IE8-9, përdorni Bootstrap 3.
Modalet dhe zbritjet në celular
Mbushje dhe lëvizje
Mbështetja për overflow: hidden;elementin <body>është mjaft e kufizuar në iOS dhe Android. Për këtë qëllim, kur kaloni pjesën e sipërme ose të poshtme të një modali në cilindo nga shfletuesit e këtyre pajisjeve, <body>përmbajtja do të fillojë të lëvizë. Shiko defektin e Chrome #175502 (rregulluar në Chrome v40) dhe defektin e WebKit #153852 .
Fushat e tekstit në iOS dhe lëvizja
Që nga iOS 9.2, ndërsa një modal është i hapur, nëse prekja fillestare e një gjesti rrotullues është brenda kufirit të një teksti <input>ose një <textarea>, <body>përmbajtja poshtë modalit do të lëvizet në vend të vetë modalit. Shiko defektin #153856 WebKit .
Dropdowns Navbar
Elementi .dropdown-backdropnuk përdoret në iOS në navigacion për shkak të kompleksitetit të indeksimit z. Kështu, për të mbyllur skedarët me zbritje në shiritat e navigimit, duhet të klikoni drejtpërdrejt elementin rënës (ose çdo element tjetër që do të aktivizojë një ngjarje klikimi në iOS ).
Zmadhimi i shfletuesit
Zmadhimi i faqeve paraqet në mënyrë të pashmangshme paraqitjen e artefakteve në disa komponentë, si në Bootstrap ashtu edhe në pjesën tjetër të internetit. Në varësi të problemit, ne mund të jemi në gjendje ta rregullojmë atë (së pari kërkoni dhe më pas hapni një problem nëse është e nevojshme). Sidoqoftë, ne priremi t'i injorojmë këto pasi ato shpesh nuk kanë asnjë zgjidhje të drejtpërdrejtë përveç zgjidhjeve të paqarta.
Ngjitës :hover/ :focusnë iOS
Ndonëse :hovernuk është e mundur në shumicën e pajisjeve me prekje, iOS e imiton këtë sjellje, duke rezultuar në stile "ngjitëse" të pezullimit që vazhdojnë pas prekjes së një elementi. Këto stile lëvizëse hiqen vetëm kur përdoruesit prekin një element tjetër. Kjo sjellje konsiderohet kryesisht e padëshirueshme dhe duket se nuk është një problem në pajisjet Android ose Windows.
Përgjatë publikimeve tona alfa dhe beta të v4, ne përfshimë kodin e paplotë dhe të komentuar për të zgjedhur një shirit të pyetjeve mediatike që do të çaktivizonte stilet e lëvizjes në shfletuesit e pajisjeve me prekje që imitojnë pezullimin. Kjo punë nuk u përfundua ose u aktivizua kurrë plotësisht, por për të shmangur thyerjen e plotë, ne kemi zgjedhur ta zhvlerësojmë këtë shirit dhe t'i mbajmë miksat si shkurtore për pseudo-klasat.
Shtypje
Edhe në disa shfletues modernë, printimi mund të jetë i çuditshëm.
Që nga Safari v8.0, përdorimi i klasës me gjerësi fikse .containermund të bëjë që Safari të përdorë një madhësi jashtëzakonisht të vogël fonti gjatë printimit. Shih çështjen #14868 dhe defektin e WebKit #138192 për më shumë detaje. Një zgjidhje e mundshme është CSS e mëposhtme:
@media print {
.container {
width: auto;
}
}
Shfletuesi i aksioneve Android
Nga kutia, Android 4.1 (dhe madje edhe disa versione më të reja me sa duket) dërgohen me aplikacionin Browser si shfletuesin e parazgjedhur të uebit (në krahasim me Chrome). Fatkeqësisht, aplikacioni i Shfletuesit ka shumë gabime dhe mospërputhje me CSS në përgjithësi.
Zgjidhni menunë
Në <select>elemente, shfletuesi i aksioneve Android nuk do të shfaqë kontrollet anësore nëse ka një border-radiusdhe/ose borderaplikuar. (Shihni këtë pyetje të StackOverflow për detaje.) Përdorni copëzën e kodit më poshtë për të hequr CSS-në ofenduese dhe për ta paraqitur atë <select>si një element të pa stiluar në shfletuesin e aksioneve Android. Nuhatja e agjentit të përdoruesit shmang ndërhyrjen me shfletuesit Chrome, Safari dhe 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>
Dëshironi të shihni një shembull? Shikoni këtë demonstrim JS Bin .
Validuesit
Për të ofruar përvojën më të mirë të mundshme për shfletuesit e vjetër dhe me gabime, Bootstrap përdor hakimet e shfletuesit CSS në disa vende për të synuar CSS speciale për disa versione të shfletuesit në mënyrë që të zgjidhë gabimet në vetë shfletuesit. Këto hakime të kuptueshme bëjnë që vërtetuesit e CSS të ankohen se ato janë të pavlefshme. Në disa vende, ne përdorim gjithashtu veçori të fundit CSS që nuk janë ende plotësisht të standardizuara, por ato përdoren thjesht për përmirësim progresiv.
Këto paralajmërime verifikimi nuk kanë rëndësi në praktikë pasi pjesa jo-hacky e CSS-së tonë vërtetohet plotësisht dhe pjesët hacky nuk ndërhyjnë në funksionimin e duhur të pjesës jo-hacky, prandaj ne i shpërfillim qëllimisht këto paralajmërime të veçanta.
Dokumentet tona HTML gjithashtu kanë disa paralajmërime të parëndësishme dhe të parëndësishme të vërtetimit HTML për shkak të përfshirjes sonë të një zgjidhjeje për një gabim të caktuar të Firefox-it .