Iibhrawuza kunye nezixhobo
Funda malunga nezikhangeli kunye nezixhobo, ukusuka kule mihla ukuya kwakudala, ezixhaswa yiBootstrap, kubandakanya iiquirks ezaziwayo kunye nebugs nganye.
Iibhrawuza ezixhaswayo
I-Bootstrap ixhasa ukukhutshwa kwamva nje, okuzinzileyo kwazo zonke iibhrawuza ezinkulu kunye namaqonga. Kwi-Windows, sixhasa i-Internet Explorer 10-11 / Microsoft Edge .
Iibrowser ezizezinye ezisebenzisa inguqulelo yamva nje yeWebKit, iBlink, okanye iGecko, nokuba ngokuthe ngqo okanye ngeplatform ye-API yokujonga iwebhu, ayixhaswanga ngokucacileyo. Nangona kunjalo, iBootstrap kufuneka (kwiimeko ezininzi) ibonise kwaye isebenze ngokuchanekileyo kwezi bhrawuza ngokunjalo. Ulwazi oluthe ngqo lwenkxaso lunikiwe ngezantsi.
Ungalufumana uluhlu lwethu oluxhaswayo lwebhrawuza kunye neenguqulelo zazo kweyethu.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
Sisebenzisa i -Autoprefixer ukusingatha inkxaso ecetywayo yesikhangeli sisebenzisa izimaphambili zeCSS, esebenzisa uluhlu lweBhrawuza ukulawula ezi nguqulelo zebrawuza. Qhagamshelana namaxwebhu abo malunga nendlela yokudibanisa ezi zixhobo kwiiprojekthi zakho.
Izixhobo eziphathwayo
Ngokubanzi, iBootstrap ixhasa uguqulelo lwamva nje lwesikhangeli esikhulu seqonga ngalinye. Qaphela ukuba iibrowser zeproxy (ezifana ne-Opera Mini, imowudi ye-Opera Mobile ye-Turbo, i-UC Browser Mini, i-Amazon Silk) ayixhaswanga.
| IChrome | IFirefox | Safari | Isikhangeli se-Android kunye ne-WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Ixhasiwe | Ixhasiwe | N / A | I-Android v5.0+ iyaxhaswa | Ixhasiwe |
| iOS | Ixhasiwe | Ixhasiwe | Ixhasiwe | N / A | Ixhasiwe |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Ixhasiwe |
Iibhrawuza zeDesktop
Ngokufanayo, iinguqulelo zamva nje zebrowser ezininzi zedesktop ziyaxhaswa.
| IChrome | IFirefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| IMac | Ixhasiwe | Ixhasiwe | N / A | Ixhasiwe | Ixhasiwe | Ixhasiwe |
| IiWindows | Ixhasiwe | Ixhasiwe | Ixhaswe, IE10+ | Ixhasiwe | Ixhasiwe | Ayixhaswa |
KwiFirefox, ukongeza kukhupho lwamva nje oluzinzileyo oluzinzileyo, sikwaxhasa inguqulelo yamva nje yokukhutshwa kweNkxaso eYandisiweyo (ESR) yeFirefox.
Ngokungekho mthethweni, iBootstrap kufuneka ijonge kwaye iziphathe kakuhle ngokwaneleyo kwiChromium kunye neChrome yeLinux, iFirefox yeLinux, kunye ne-Internet Explorer 9, nangona ingaxhaswanga ngokusemthethweni.
Kuluhlu lwezinye iibhugi zebhrawuza ekufuneka iBootstrap ijongane nazo, bona iWall yethu yebugs zebrawuza .
Internet Explorer
I-Internet Explorer 10+ iyaxhaswa; IE9 kwaye phantsi ayikho. Nceda qaphela ukuba ezinye iipropati ze-CSS3 kunye neempawu ze-HTML5 azixhaswanga ngokupheleleyo kwi-IE10, okanye zifuna iimpawu ezimiselweyo zokusebenza ngokupheleleyo. Ndwendwela Ndinga sebenzisa... ngeenkcukacha ngenkxaso yesikhangeli seCSS3 kunye neHTML5. Ukuba ufuna inkxaso ye-IE8-9, sebenzisa iBootstrap 3.
Iimodyuli kunye nokwehla kwiselula
Ukuphuphuma kunye nokuskrola
Inkxaso yento ilinganiselwe kakhulu kwi-iOS kunye ne-Android overflow: hidden;. <body>Ukuza kuthi ga ngoku, xa uskrola udlule ngaphezulu okanye ezantsi kwemodali kuso nasiphi na isikhangeli sezixhobo, <body>umxholo uya kuqalisa ukuskrola. Jonga i-Chrome bug #175502 (ilungiswe kwi-Chrome v40) kunye ne- WebKit bug #153852 .
Imihlaba yokubhaliweyo ye-iOS kunye nokuskrola
Ukususela kwi-iOS 9.2, ngelixa i-modal ivuliwe, ukuba i-touch yokuqala ye-scrolling gesture ingaphakathi komda wesicatshulwa <input>okanye i- <textarea>, <body>umxholo ongaphantsi kwe-modal uya kuskrolwa endaweni ye-modal ngokwayo. Jonga i-WebKit bug #153856 .
Navbar eyehlayo
Into .dropdown-backdropayisetyenziswanga kwi-iOS kwi-nav ngenxa yobunzima be-z-indexing. Ke, ukuvala ukwehla kwii-navbar, kufuneka ucofe ngokuthe ngqo into eyehlayo (okanye nayiphi na enye into eya kutshisa isiganeko sokucofa kwi-iOS ).
Ukwandisa ibrowser
Usondezo lwephepha lubonisa ngokungenakuthintelwa unikezelo lwezinto zakudala kwamanye amalungu, zombini kwiBootstrap kunye newebhu iyonke. Kuxhomekeke kumcimbi, singakwazi ukuwulungisa (khangela kuqala uze uvule umba ukuba kukho imfuneko). Nangona kunjalo, sikholisa ukungazinanzi ezi zinto njengoko zihlala zingenaso isisombululo esithe ngqo ngaphandle kwee-hacky workarounds.
Incangathi :hover/ :focuskwi-iOS
Ngelixa :hoverkungenzeki kwizixhobo ezininzi zokuchukumisa, i-iOS ilinganisa le ndlela yokuziphatha, ekhokelela kwizitayile “zokuncamathela” eziqhubeka emva kokucofa into enye. Ezi ndlela zokuhambisa zisuswa kuphela xa abasebenzisi becofa enye into. Oku kuziphatha kuthathwa njengokungafunekiyo kwaye kubonakala kungeyongxaki kwizixhobo ze-Android okanye zeWindows.
Kuyo yonke i-v4 yethu yokukhutshwa kwe-alpha kunye ne-beta, sibandakanyile ukungaphelelanga kunye nekhowudi yokuphuma kwikhowudi yokungena kumbuzo wemidiya shim onokuthi ucime izitayile ze-hover kwizikhangeli zesixhobo sokuchukumisa ezilinganisa ukujikeleza. Lo msebenzi awuzange ugqitywe ngokupheleleyo okanye wenziwa ukuba usebenze, kodwa ukunqanda ukophuka ngokupheleleyo, siye sakhetha ukuyiyeka le shim kwaye sigcine imixube njengeendlela ezimfutshane zeeklasi zobuxoki.
Ukushicilela
Nakwezinye iibrowsers zanamhlanje, ukuprinta kunokuba nzima.
Njengoko of Safari v8.0, ukusetyenziswa kweklasi yobubanzi obumiselweyo kunokubangela ukuba iSafari isebenzise .containerubungakanani befonti encinci ngokungaqhelekanga xa kushicilelwa. Jonga umba #14868 kunye ne- WebKit bug #138192 ngeenkcukacha ezithe vetshe. Enye indlela enokuthi isebenze yile CSS ilandelayo:
@media print {
.container {
width: auto;
}
}
Isikhangeli sesitokhwe se-Android
Ngaphandle kwebhokisi, i-Android 4.1 (kunye nokunye okukhutshiweyo okutsha ngokucacileyo) ngenqanawa kunye ne-Browser app njengesikhangeli sewebhu esikhethiweyo (ngokuchaseneyo neChrome). Ngelishwa, usetyenziso lweBhrawuza ineempazamo ezininzi kunye nokungahambelani neCSS ngokubanzi.
Khetha imenyu
Kwizinto <select>, isikhangeli sesitokhwe se-Android asiyi kubonisa ulawulo olusecaleni ukuba kukho border-radiuskunye/okanye borderkusetyenziswe. (Jonga lo mbuzo weStackOverflow ngeenkcukacha.) Sebenzisa isiqwengana sekhowudi engezantsi ukususa i-CSS ekhubekisayo kwaye <select>unikeze njengento engabhalwanga kwisikhangeli sesitokhwe se-Android. Umsebenzisi othungayo unqanda ukuphazamisana neChrome, iSafari, kunye nezikhangeli zeMozilla.
<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>
Ngaba ufuna ukubona umzekelo? Jonga le demo yeJS Bin .
Iziqinisekiso
Ukuze unikeze amava angcono kakhulu kwiziphequluli ezindala kunye ne-buggy, i-Bootstrap isebenzisa i - CSS i-hacks ye-browser kwiindawo ezininzi ukujolisa i-CSS ekhethekileyo kwiinguqulelo ezithile zebrawuza ukuze isebenze malunga neebhugi kwizikhangeli ngokwazo. Ezi hacks ngokuqondakalayo zibangela ukuba abaqinisekisi beCSS bakhalaze ukuba abakho mthethweni. Kwiindawo ezimbalwa, sikwasebenzisa iimpawu ze-CSS ezophayo ezingekamiswa ngokupheleleyo, kodwa ezi zisetyenziselwa uphuculo oluqhubekayo.
Ezi zilumkiso zokuqinisekisa azinamsebenzi xa kusenziwa oko ekubeni icandelo elingenabuqhophololo le-CSS yethu liqinisekisa ngokupheleleyo kwaye izahlulo ezikhohlisayo aziphazamisi ukusebenza kakuhle kwenxalenye engeyiyo i-hacky, kungoko sityeshela ngabom ezi zilumkiso.
Amaxwebhu ethu e-HTML nawo anezilumkiso ezingenamsebenzi nezingabalulekanga zokuqinisekiswa kwe-HTML ngenxa yokufakwa kwethu kwenkqubo ethile ye -Firefox bug .