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.
Wubetumi ahu yɛn browser ahorow a yɛboa ne wɔn nkyerɛase ahorow wɔ yɛn.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
Yɛde Autoprefixer di dwuma de di browser mmoa a yɛpɛ sɛ yɛyɛ ho dwuma denam CSS prefixes so, a ɛde Browserslist di dwuma de hwɛ browser nkyerɛase ahorow yi so. Hwɛ wɔn nkrataa mu na woahu sɛnea wode saa nnwinnade yi bɛka wo nnwuma ho.
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ɔ | Wɔboaa no | 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 di dwuma.
Modals ne dropdowns wɔ mobile so
Overflow ne scroll a ɛrekɔ so
Mmoa ma overflow: hidden;wɔ <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 .
Navbar Nneɛma a Wɔde Totɔ Nneɛma
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
Wɔ <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 .