Source

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ë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"
]

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.

Pajisje 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 N/A 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 për IE8-9, përdorni Bootstrap 3. Është versioni më i qëndrueshëm i kodit tonë dhe ende mbështetet nga ekipi ynë për korrigjimet kritike të defekteve dhe ndryshimet e dokumentacionit. Megjithatë, asnjë veçori e re nuk do të shtohet në të.

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 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 e WebKit #153856 .

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 kemi përfshirë kodin e paplotë dhe të komentuar për të zgjedhur një skedë për pyetje 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 prishjen 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ë

<select>elemente, shfletuesi i aksioneve Android nuk do të shfaqë kontrollet anësore nëse ka një border-radiusdhe/ose borderaplikuar. (Shih 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ërhyrjet 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 të 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 bëjnë që vërtetuesit e CSS të ankohen se janë të pavlefshëm. 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 vërtetimi 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 të HTML për shkak të përfshirjes sonë të një zgjidhjeje për një gabim të caktuar të Firefox-it .