Source

Browser ne mfiri ahorow

Sua browser ne mfiri ahorow, efi nnɛyi kosi dedaw so, a Bootstrap boa, a quirks ne bugs a wonim ma emu biara ka ho.

Browser ahorow a wɔboa

Bootstrap boa browser akɛse ne platform ahorow nyinaa a wɔayi no adi a ɛyɛ foforo a ɛyɛ den . Wɔ Windows so no, yɛboa Internet Explorer 10-11 / Microsoft Edge .

Browsa foforo a ɛde WebKit, Blink, anaa Gecko a aba foforo di dwuma, sɛ ɛyɛ tẽẽ anaasɛ ɛnam platform no wɛb hwɛ API so no, wɔmfa mmoa pefee. Nanso, ɛsɛ sɛ Bootstrap (wɔ nsɛm dodow no ara mu) da adi na ɛyɛ adwuma yiye wɔ saa browser ahorow yi nso mu. Wɔde mmoa ho nsɛm pɔtee pii ama wɔ ase ha.

Mfiri a wɔde di dwuma wɔ telefon so

Sɛ yɛbɛka no ɔkwan biara so a, Bootstrap boa platform kɛse biara default browser ahorow no nkyerɛase a aba foforo. Hyɛ no nsow sɛ wɔmfa proxy brawsa ahorow (te sɛ Opera Mini, Opera Mobile no Turbo mode, UC Browser Mini, Amazon Silk) ntom.

Chrome na ɛwɔ hɔ Firefox a ɛwɔ hɔ Safari a wɔde di dwuma Android Browser & Wɛbsaet Hwɛ Microsoft Edge a ɛwɔ hɔ no
Android so Wɔboaa no Wɔboaa no N/A na ɛwɔ hɔ Android v5.0+ a wɔboa no Wɔboaa no
iOS a ɛwɔ hɔ no Wɔboaa no Wɔboaa no Wɔboaa no N/A na ɛwɔ hɔ Wɔboaa no
Windows 10 Mobile a Wɔde Di Dwuma N/A na ɛwɔ hɔ N/A na ɛwɔ hɔ N/A na ɛwɔ hɔ N/A na ɛwɔ hɔ Wɔboaa no

Desktop browser ahorow a wɔde di dwuma

Saa ara nso na wɔboa desktop browser dodow no ara a aba foforo no.

Chrome na ɛwɔ hɔ Firefox a ɛwɔ hɔ Intanɛt so Nhwehwɛmu Microsoft Edge a ɛwɔ hɔ no Opera Safari a wɔde di dwuma
Mac na ɛwɔ hɔ Wɔboaa no Wɔboaa no N/A na ɛwɔ hɔ N/A na ɛwɔ hɔ Wɔboaa no Wɔboaa no
Windows a ɛwɔ hɔ Wɔboaa no Wɔboaa no Wɔboa, IE10 + Wɔboaa no Wɔboaa no Wɔmfa mmoa mma

Firefox deɛ, ɛde ka normal stable release a ɛtwa toɔ no ho no, yɛsan nso boa Extended Support Release (ESR) version a ɛtwa toɔ a ɛwɔ Firefox no mu.

Wɔ ɔkwan a ɛnyɛ aban kwan so no, ɛsɛ sɛ Bootstrap hwɛ na ɛyɛ n’ade yiye wɔ Chromium ne Chrome ma Linux, Firefox ma Linux, ne Internet Explorer 9, ɛwom sɛ wɔmfa aban mmoa mma de.

Sɛ wopɛ browser bugs a ɛsɛ sɛ Bootstrap di ho dwuma no bi din a, hwɛ yɛn Wall of browser bugs .

Intanɛt so Nhwehwɛmu

Internet Explorer 10+ no yɛ nea wɔboa; IE9 ne fam no nyɛ saa. Yɛsrɛ wo hu sɛ CSS3 agyapadeɛ bi ne HTML5 nneɛma bi ntumi mmoa no koraa wɔ IE10 mu, anaasɛ ɛhia agyapadeɛ a wɔde ahyɛ aseɛ ama dwumadie a ɛwie pɛyɛ. Kɔ So metumi de adi dwuma... na woanya nsɛm a ɛfa browser mmoa a ɛfa CSS3 ne HTML5 nneɛma ho.

Sɛ wopɛ IE8-9 mmoa a, fa Bootstrap 3. Ɛyɛ yɛn koodu no fã a ɛyɛ den sen biara na yɛn kuw no da so ara boa ma mfomso ahorow a ɛho hia ne nkrataa mu nsakrae. Nanso, wɔremfa nneɛma foforo biara nka ho.

Modals ne dropdowns wɔ mobile so

Overflow ne scroll a ɛrekɔ so

Mmoa ma overflow: hidden;<body>element no so no yɛ kakraa bi koraa wɔ iOS ne Android mu. Nea ɛbɛyɛ na woatumi ayɛ saa no, sɛ wokɔ modal bi atifi anaa ase wɔ saa mfiri ahorow no browser ahorow no mu biara mu a, <body>emu nsɛm no befi ase atutu. Hwɛ Chrome bɔne #175502 (wɔasiesie wɔ Chrome v40 mu) ne WebKit bɔne #153852 .

iOS nsɛm a wɔde kyerɛw nsɛm ne scrolling

Ɛde besi iOS 9.2 no, bere a modal bi abue no, sɛ nhoma mmobɔwee sɛnkyerɛnne bi a wɔde nsa ka mfiase no wɔ nkyerɛwee <input>anaa a hye mu a <textarea>, <body>wɔbɛkyerɛw nsɛm a ɛwɔ modal no ase no sen sɛ wɔbɛkyerɛw modal no ankasa. Hwɛ WebKit bɔne #153856 .

Wɔmfa .dropdown-backdropelement no nni dwuma wɔ iOS so wɔ nav no mu esiane z-indexing a ɛyɛ den nti. Enti, sɛ wobɛto dropdowns mu wɔ navbars mu a, ɛsɛ sɛ wobɔ dropdown element no tẽẽ (anaasɛ element foforo biara a ɛbɛtow click event wɔ iOS ).

Browser a ɛreyɛ kɛse

Kratafa a wɔde yɛ kɛse no de rendering artifacts kyerɛ wɔ nneɛma bi mu a wontumi nkwati, wɔ Bootstrap ne wɛb no fã a aka no nyinaa mu. Ɛgyina asɛm no so no, ebia yebetumi asiesie (di kan hwehwɛ na afei sɛ ɛho hia a, bue asɛm bi). Nanso, yɛtaa bu yɛn ani gu eyinom so sɛnea wɔtaa nni ano aduru tẽẽ biara gye hacky workarounds.

Sticky :hover/ :focuswɔ iOS so

Bere :hovera ɛrentumi nyɛ yiye wɔ mfiri dodow no ara a wɔde nsa ka so no, iOS suasua saa suban yi, na ɛde hover styles a “ɛyɛ nnam” a ɛkɔ so tra hɔ bere a woabɔ element biako akyi no ba. Saa hover styles yi na woyi fi hɔ bere a wɔn a wɔde di dwuma no bɔ element foforo nkutoo. Wobu saa suban yi sɛ ɛnyɛ nea wɔpɛ kɛse na ɛte sɛ nea ɛnyɛ asɛm wɔ Android anaa Windows mfiri ahorow so.

Wɔ yɛn v4 alpha ne beta a wɔayi no adi nyinaa mu no, yɛde code a enni mũ na yɛkaa ho asɛm de kaa ho sɛ yɛbɛpaw akɔ media asɛmmisa shim a ɛbɛma hover styles ayɛ adwuma wɔ touch device browser ahorow a esuasua hovering mu. Saa adwuma yi nwiei koraa anaasɛ wɔantumi anhyɛ da, nanso sɛnea ɛbɛyɛ a yɛbɛkwati sɛ ɛbɛbubu koraa no, yɛapaw sɛ yɛbɛpow saa shim yi na yɛde mixins no asie sɛ akwan tiawa ma pseudo-classes no.

Nsɛm a Wɔtintim

Wɔ nnɛyi browser ahorow bi mu mpo no, nhoma tintim betumi ayɛ nea ɛyɛ nwonwa.

Ɛde besi Safari v8.0 no, fixed-width .containerclass a wode bedi dwuma no betumi ama Safari de font kɛse ketewaa bi a ɛyɛ soronko adi dwuma bere a ɔretintim no. Hwɛ nsɛmma nhoma #14868 ne WebKit bɔne #138192 ma nsɛm pii. Ade biako a ebetumi ayɛ adwuma ne CSS a edidi so yi:

@media print {
  .container {
    width: auto;
  }
}

Android stock browser a ɛwɔ hɔ no

Fi adaka no mu no, Android 4.1 (na ɛda adi sɛ nea wɔayi no adi foforo bi mpo) de Browser app no ​​ba sɛ wɛbsaet browser a wɔpaw no dedaw (a ɛne Chrome bɔ abira). Awerɛhosɛm ne sɛ, Browser app no ​​wɔ mfomso pii ne nea ɛne CSS nhyia wɔ ɔkwan a ɛkɔ akyiri so.

Paw menu no

<select>elements so no, Android stock browser no renkyerɛ afã controls no sɛ ɛwɔ hɔ border-radiusne/anaasɛ borderwɔde adi dwuma a. (Hwɛ StackOverflow asɛmmisa yi ma nsɛm no mu nsɛm.) Fa koodu no fã bi a ɛwɔ ase ha no yi CSS a ɛhyɛ abufuw no na kyerɛ ase <select>sɛ ade a wɔanhyɛ da wɔ Android stock browser no so. Ɔdefo no agent sniffing kwati sɛ ɛbɛtwetwe Chrome, Safari, ne Mozilla browser ahorow no.

<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>

Wopɛ sɛ wuhu nhwɛso bi? Hwɛ JS Bin demo yi.

Wɔn a wɔma ɛyɛ nokware

Sɛnea ɛbɛyɛ a wobenya osuahu a eye sen biara ama browser dedaw ne nea ɛyɛ bɔne no, Bootstrap de CSS browser hacks di dwuma wɔ mmeae pii de de wɔn ani si CSS soronko so wɔ browser ahorow bi so sɛnea ɛbɛyɛ a ɛbɛyɛ adwuma atwa mfomso ahorow a ɛwɔ browser ahorow no ankasa mu ho dwuma. Ntease wom sɛ saa hacks yi ma CSS validators nwiinwii sɛ ɛnyɛ adwuma. Wɔ mmeae awarefo bi no, yɛsan nso de bleeding-edge CSS features a wonnya nyɛɛ standardized koraa di dwuma, nanso wɔde eyinom di dwuma ma nkɔso a ɛkɔ so ara kwa.

Saa validation kɔkɔbɔ ahorow yi ho nhia wɔ nneyɛe mu efisɛ yɛn CSS no fã a ɛnyɛ hacky no yɛ validate koraa na hacky afã horow no nsiw ɔfã a ɛnyɛ hacky no dwumadi yiye no kwan, ɛno nti na yɛhyɛ da bu yɛn ani gu kɔkɔbɔ pɔtee yi so.

Yɛn HTML docs no nso wɔ HTML validation kɔkɔbɔ ahorow bi a ɛho nhia na ɛho nhia esiane sɛ yɛde adwuma bi a yɛde besiesie Firefox bɔne bi aka ho nti .