Source

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 wipackage.json :

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "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. Na di mɔs stebul vɛshɔn fɔ wi kɔd ɛn wi tim stil de sɔpɔt am fɔ impɔtant bɔgfiks ɛn chenj dɛn fɔ dɔkyumentri. Bɔt dɛn nɔ go ad ɛni nyu tin to am.

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 .

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, Andrɔyd 4.1 (ɛn ivin sɔm nyu rilis dɛn i tan lɛk) 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 .