Brawza ɛn divays dɛn
Lan bɔt di brawza ɛn divays dɛn, frɔm di mɔdan to di ol wan dɛn, we Bootstrap de sɔpɔt, inklud di quirks ɛn bɔg dɛn we dɛn sabi fɔ ɛni wan pan dɛn.
Brawza dɛn we dɛn de sɔpɔt
Bootstrap de sɔpɔt di laytst, stebul rilis dɛn fɔ ɔl di men brawza ɛn pletfɔm dɛn. Na Windows, wi de sɔpɔt Intanɛt Ɛksplɔrɔ 10-11 / Maykrosoft Ɛj .
Ɔda brawza dɛn we de yuz di layt vɛshɔn fɔ WɛbKit, Blink, ɔ Gecko, ilɛksɛf na dairekt ɔ tru di pletfɔm in wɛb viu API, dɛn nɔ de sɔpɔt klia wan. Bɔt, Bootstrap fɔ (bɔku tɛm) sho ɛn wok kɔrɛkt wan na dɛn brawza dɛn ya bak. Dɛn dɔn gi mɔ patikyula sɔpɔt infɔmeshɔn dɔŋ ya.
Yu kin fɛn wi sɔpɔt rɛnj fɔ brawza dɛn ɛn dɛn vɛshɔn dɛn na wi.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
Wi de yuz Autoprefixer fɔ handle di sɔpɔt we wi want fɔ sɔpɔt di brawza bay CSS prɛfiks dɛn, we de yuz Browserslist fɔ manej dɛn brawza vɛshɔn dɛn ya. Kɔnsul dɛn dɔkyumentri fɔ aw fɔ intagret dɛn tul ya insay yu prɔjek dɛm.
Mobayl divays dɛn
Jɛnɛral wan, Bootstrap de sɔpɔt di laytst vɛshɔn dɛn fɔ ɛni men pletfɔm in difɔlt brawza dɛn. Notis se dɛn nɔ de sɔpɔt prɔksi brawza dɛn (lɛk Opera Mini, Opera Mobile in Turbo mod, UC Browser Mini, Amazon Silk).
| Krɔm we dɛn kɔl Chrome | Fayafaks | Safari we dɛn kin yuz | Andrɔyd Brawza & WɛbView | Maykrosoft Ɛj | |
|---|---|---|---|---|---|
| Andrɔyd | Dɛn sɔpɔt am | Dɛn sɔpɔt am | N/A fɔ di wan dɛn we de | Andrɔyd v5.0+ de sɔpɔt | Dɛn sɔpɔt am |
| iOS we de na di wɔl | Dɛn sɔpɔt am | Dɛn sɔpɔt am | Dɛn sɔpɔt am | N/A fɔ di wan dɛn we de | Dɛn sɔpɔt am |
| Windows 10 Mobayl fɔ yuz | N/A fɔ di wan dɛn we de | N/A fɔ di wan dɛn we de | N/A fɔ di wan dɛn we de | N/A fɔ di wan dɛn we de | Dɛn sɔpɔt am |
Dɛsktɔp brawza dɛn
Semweso, dɛn kin sɔpɔt di laytst vɛshɔn dɛn fɔ bɔku pan di dɛsktɔp brawza dɛn.
| Krɔm we dɛn kɔl Chrome | Fayafaks | Intanɛt Ɛksplɔrɔ | Maykrosoft Ɛj | Ɔpa we dɛn kɔl Opera | Safari we dɛn kin yuz | |
|---|---|---|---|---|---|---|
| Mac we dɛn kɔl Mac | Dɛn sɔpɔt am | Dɛn sɔpɔt am | N/A fɔ di wan dɛn we de | N/A fɔ di wan dɛn we de | Dɛn sɔpɔt am | Dɛn sɔpɔt am |
| Window dɛn | Dɛn sɔpɔt am | Dɛn sɔpɔt am | Sɔpɔt, IE10+ | Dɛn sɔpɔt am | Dɛn sɔpɔt am | Nɔto sɔpɔt |
Fɔ Fayafaks, apat frɔm di laytst nɔmal stebul rilis, wi de sɔpɔt bak di laytst Ɛkstend Sɔpɔt Rilis (ESR) vɛshɔn fɔ Fayafaks.
Nɔ ɔfishal wan, Bootstrap fɔ luk ɛn biev fayn fayn wan na Chromium ɛn Chrome fɔ Linux, Fayafaks fɔ Linux, ɛn Intanɛt Ɛksplɔrɔ 9, pan ɔl we dɛn nɔ ɔfishal sɔpɔt dɛn.
Fɔ si sɔm pan di brɔwza bɔg dɛn we Bootstrap gɛt fɔ grap wit, si wi Wall of browser bugs .
Intanɛt Ɛksplɔrɔ
Intanɛt Ɛksplɔrɔ 10+ de sɔpɔt; IE9 ɛn dɔŋ nɔto so. Duya mɛmba se sɔm CSS3 prɔpati ɛn HTML5 ɛlimɛnt dɛn nɔ fulɔp fɔ sɔpɔt na IE10, ɔ nid prɛfiks prɔpati fɔ ful funkshɔnaliti. Visit Can I use... fɔ di ditel dɛn bɔt di brawza sɔpɔt fɔ CSS3 ɛn HTML5 ficha dɛn. If yu nid IE8-9 sɔpɔt, yuz Bootstrap 3.
Modal ɛn drɔpdɔwn dɛn na mobayl
Ovaflɔ ɛn skrol
Sɔpɔt fɔ overflow: hidden;pan di <body>ɛlimɛnt na kwik limited in iOS ɛn Andrɔyd. Fɔ du dat, we yu skrol pas di ɔp ɔ dɔŋ pan wan modal na ɛni wan pan dɛn divays dɛn brɔuza dɛn, di <body>tin dɛn we de insay go bigin fɔ skrol. Si Chrome bɔg #175502 (dɛn dɔn fiks am na Chrome v40) ɛn WɛbKit bɔg #153852 .
iOS tɛks fil dɛn ɛn skrol
As of iOS 9.2, we wan modal opin, if di fɔs tɔch fɔ wan skrol jes de insay di bɔda fɔ wan tɛkstual <input>ɔ wan <textarea>, di <body>kɔntinyu we de ɔnda di modal go skrol instead ɔf di modal sɛf. Si WɛbKit bɔg #153856 .
Navbar Drɔpdɔwn dɛn
Di .dropdown-backdropelemɛnt nɔ de yuz pan iOS na di nav bikɔs ɔf di kɔmplisiti fɔ z-indeks. So, fɔ lɔk drɔpdɔwn dɛn na navbar dɛn, yu fɔ klik di drɔpdɔwn ɛlimɛnt dairekt wan (ɔ ɛni ɔda ɛlimɛnt we go faya klik ivin na iOS ).
Di brawza de zoom
Pej zum in nɔ go ebul fɔ avɔyd fɔ prɛzɛnt rɛnda artifakt dɛn na sɔm kɔmpɔnɛnt dɛn, ɔl tu na Bootstrap ɛn di ɔda pat na di wɛb. Dipen pan di prɔblɛm, wi kin ebul fɔ fiks am (luk fɔs ɛn opin wan prɔblɛm if nid de). Bɔt wi kin ignore dɛn wan ya as bɔku tɛm dɛn nɔ kin gɛt dairekt sɔlvishɔn ɔda pas hacky wokarawnd.
Stika :hover/ :focusna iOS
Pan ɔl :hoverwe i nɔ pɔsibul pan bɔku tɔch divays dɛn, iOS de falamakata dis bihayvya, we de mek “stika” hova stayl dɛn we de kɔntinyu afta yu tap wan ɛlimɛnt. Dɛn hova stayl dɛn ya kin jɔs kɔmɔt we di wan dɛn we de yuz am tap ɔda ɛlimɛnt. Dɛn kin tek dis bihayvya as sɔntin we nɔ fayn ɛn i tan lɛk se nɔto prɔblɛm na Andrɔyd ɔ Window divays dɛn.
Tru wi v4 alfa ɛn beta rilis dɛn, wi inklud inkɔmplit ɛn kɔmɛnt aut kɔd fɔ opt insay wan midia kwɛstyɔn shim we go disable hova stayl dɛn na tɔch divays brawza dɛn we de ɛmulayt hovering. Dis wok nɔ bin ɛva fulɔp ɔ ɛnabul, bɔt fɔ avɔyd kɔmplit brek, wi dɔn pik fɔ deprecate dis shim ɛn kip di miksin dɛn as sɔtkat fɔ di pseudo-klas dɛn.
We dɛn de print
Ivin insay sɔm brɔuzhɔ dɛn tide, fɔ print kin mek pɔsin nɔ ebul fɔ du natin.
As fɔ Safari v8.0, we yu yuz di fiks-wid .containerklas kin mek Safari yuz wan smɔl font saiz we nɔ kɔmɔn we i de print. Si isyu #14868 ɛn WɛbKit bɔg #138192 fɔ mɔ ditel. Wan tin we pɔsin kin du fɔ sɔlv di prɔblɛm na di CSS we de dɔŋ ya:
@media print {
.container {
width: auto;
}
}Andrɔyd stok brawza
Frɔm di bɔks, i tan lɛk se Andrɔyd 4.1 (ɛn ivin sɔm nyu rilis dɛn) de ship wit di Brawza ap as di difɔlt wɛb brawza we yu pik (we difrɛn frɔm Chrome). I sɔri fɔ no se di Brawza ap gɛt bɔku bɔg ɛn tin dɛn we nɔ gri wit CSS in jɔnaral.
Pik di mɛnyu
Na <select>ɛlimɛnt dɛn, di Andrɔyd stok brawza nɔ go sho di sayd kɔntrol dɛn if wan border-radiusɛn/ɔ borderdɛn dɔn yuz am. (Luk dis StackOverflow kwɛstyɔn fɔ di ditel dɛn.) Yuz di smɔl pat pan di kɔd we de dɔŋ fɔ pul di CSS we de mek yu vɛks ɛn rɛnd di <select>as wan ɛlimɛnt we nɔ gɛt stayl na di Andrɔyd stok brawza. Di yuz ɛjɛn we de snɛf de avɔyd fɔ ambɔg Chrome, Safari, ɛn Mozilla brawza dɛn.
<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>Yu want fɔ si ɛgzampul? Chek out dis JS Bin demo .
Di wan dɛn we de validet
Fɔ mek dɛn ebul fɔ gi di bɛst ɛkspiriɛns to ol ɛn bɔg brawza dɛn, Bootstrap de yuz CSS brawza hack dɛn na sɔm ples dɛn fɔ tɔch spɛshal CSS to sɔm brawza vɛshɔn dɛn fɔ mek dɛn ebul fɔ wok arawnd bɔg dɛn na di brawza dɛnsɛf. Wi ɔndastandin se dɛn hack ya kin mek CSS validators kɔmplen se dɛn nɔ valid. Insay wan tu ples, wi de yuz bak blɔd-ɛj CSS ficha dɛn we nɔ ful-ɔp yet fɔ standad, bɔt dɛn de yuz dɛn wan ya jɔs fɔ mek dɛn go bifo mɔ ɛn mɔ.
Dɛn validɛshɔn wɔnin ya nɔ impɔtant na prɔsis bikɔs di pat we nɔ gɛt haki na wi CSS de fulɔp fɔ validet ɛn di haki pat dɛn nɔ de ambɔg di rayt we fɔ wok we di pat we nɔ haki de du, na dat mek wi nɔ de tek tɛm du dɛn patikyula wɔnin ya.
Wi HTML dɔk dɛn sɛf gɛt sɔm tin dɛn we nɔ impɔtant ɛn we nɔ impɔtant HTML validɛshɔn wɔnin dɛn bikɔs wi put wan wok-arawnd fɔ wan patikyula Fayafaks bɔg .