Gerok û cîhazên
Fêrbûna gerok û cîhazên, ji nûjen heya kevn, ku ji hêla Bootstrap ve têne piştgirî kirin, ji bo her yekê qurs û xeletiyên naskirî hene.
Bootstrap serbestberdanên herî paşîn, aram ên hemî gerok û platformên sereke piştgirî dike. Li ser Windows, em piştgirî didin Internet Explorer 10-11 / Microsoft Edge .
Gerokên alternatîf ên ku guhertoya herî dawî ya WebKit, Blink, an Gecko bikar tînin, çi rasterast an bi riya API-ya dîtina webê ya platformê, bi eşkere nayê piştgirî kirin. Lêbelê, Bootstrap divê (di pir rewşan de) di van gerokan de jî rast nîşan bide û bixebite. Agahdariya piştevaniya taybetî ya li jêr tê peyda kirin.
Hûn dikarin rêza gerokên me yên piştgirî û guhertoyên wan di nav me depackage.json bibînin :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Em Autoprefixer bikar tînin da ku desteka gerokê ya armanckirî bi navgîniya pêşgirên CSS-ê vebigirin, ya ku Browerslist bikar tîne da ku van guhertoyên gerokê birêve bibe. Ji bo ku hûn van amûran di projeyên xwe de çawa yek bikin, bi belgeyên wan re şêwir bikin.
Bi gelemperî, Bootstrap guhertoyên herî paşîn ên gerokên xwerû yên her platforma sereke piştgirî dike. Têbînî ku gerokên proxy (wek Opera Mini, moda Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) nayên piştgirî kirin.
| Chrome | Firefox | Safari | Geroka Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Piştgirî kirin | Piştgirî kirin | N/A | Android v5.0+ piştgirî | Piştgirî kirin |
| iOS | Piştgirî kirin | Piştgirî kirin | Piştgirî kirin | N/A | Piştgirî kirin |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Piştgirî kirin |
Bi heman rengî, guhertoyên herî dawî yên piraniya gerokên sermaseyê têne piştgirî kirin.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opîra | Safari | |
|---|---|---|---|---|---|---|
| Mac | Piştgirî kirin | Piştgirî kirin | N/A | N/A | Piştgirî kirin | Piştgirî kirin |
| Windows | Piştgirî kirin | Piştgirî kirin | Piştgirî, IE10+ | Piştgirî kirin | Piştgirî kirin | Ne piştgirî kirin |
Ji bo Firefox, ji bilî serbestberdana asayî ya herî paşîn, em guhertoya herî dawî ya berdana Piştgiriya Berfireh (ESR) ya Firefox-ê jî piştgirî dikin.
Nefermî, Bootstrap divê li Chromium û Chrome ji bo Linux, Firefox ji bo Linux, û Internet Explorer 9 bi têra xwe baş xuya bike û tevbigere, her çend ew bi fermî nayên piştgirî kirin.
Ji bo navnîşek hin xeletiyên gerokê ku Bootstrap neçar e ku bi wan re mijûl bibe, li Dîwarê xeletiyên gerokê binêrin .
Internet Explorer 10+ tê piştgirî kirin; IE9 û jêr ne. Ji kerema xwe hay ji xwe hebin ku hin taybetmendiyên CSS3 û hêmanên HTML5 di IE10 de bi tevahî nayên piştgirî kirin, an ji bo fonksiyona tevahî taybetmendiyên pêşgir hewce ne. Ji bo hûrguliyên li ser piştgirîya gerokê ya taybetmendiyên CSS3 û HTML5, biçin Ez dikarim bikar bînim… .
Ger ji we re piştgirîya IE8-9 hewce bike, Bootstrap 3 bikar bînin. Ew guhertoya herî aram a koda me ye û hîn jî ji hêla tîmê me ve ji bo xeletiyên krîtîk û guhertinên belgekirinê tê piştgirî kirin. Lêbelê, dê ti taybetmendiyên nû li wê zêde nebin.
Piştgiriya overflow: hidden;li ser <body>hêmanê di iOS û Android-ê de pir kêm e. Ji bo wê armancê, gava ku hûn di gerokên van cîhazan de ji jor an binê modalekê derbas bikin, <body>naverok dê dest bi gerokê bike. Binêre xeletiya Chrome #175502 (di Chrome v40 de hatî rast kirin) û xeletiya WebKit #153852 .
Ji iOS 9.2-ê ve, dema ku modalek vekirî ye, heke destana destpêkê ya jestek gerokê di nav sînorê nivîsê <input>de be <textarea>, dê <body>naveroka li binê modalê li şûna modal bixwe were gerandin. Binêre xeletiya WebKit #153856 .
Element .dropdown-backdropji ber tevliheviya z-indekskirinê li ser iOS-ê di nav de nayê bikar anîn. Bi vî rengî, ji bo girtina dakêşanên di navbaran de, divê hûn rasterast li ser hêmana dakêşanê bikirtînin (an jî hêmanek din a ku dê bûyerek klîk di iOS-ê de bişewitîne ).
Zêdekirina rûpelan bi neçarî di hin beşan de, hem di Bootstrap û hem jî di tevnên mayî de, hunerên renderkirinê pêşkêşî dike. Bi pirsgirêkê ve girêdayî, dibe ku em karibin wê rast bikin (pêşî bigerin û dûv re heke hewce be pirsgirêkek vekin). Lêbelê, em mêl dikin ku vana paşguh bikin ji ber ku ew bi gelemperî ji bilî rêwerzên hacky ti çareseriyek rasterast tune.
Digel :hoverku li ser piraniya cîhazên destikê ne mumkin e, iOS vê tevgerê dişibihîne, di encamê de şêwazên hoverê yên "girêdayî" çêdibe ku piştî lêdana yek hêmanek dom dike. Van şêwazên hover tenê dema ku bikarhêner hêmanek din tap dikin têne rakirin. Ev tevger bi piranî nexwestî tê hesibandin û di cîhazên Android an Windows-ê de ne pirsgirêkek xuya dike.
Di seranserê weşanên alpha û beta yên v4 de, me kodek netemam û şîrove kir ji bo bijartina şîmek pirsiyara medyayê ya ku dê şêwazên hoverê di gerokên cîhaza pêwendiyê de yên ku hejandinê dişibînin neçalak bike. Ev xebat tu carî bi tevahî nehat qedandin an çalak kirin, lê ji bo ku em ji şikestinek bêkêmasî dûr nekevin, me hilbijart ku em vê şimayê ji holê rakin û mîksînan wekî kurtebirên ji bo çînên pseudo bihêlin.
Tewra di hin gerokên nûjen de, çapkirin dibe ku qeşeng be.
Li gorî Safari v8.0, karanîna pola-firehiya sabît .containerdikare bibe sedem ku Safari dema çapkirinê mezinahiya tîpek piçûk a bêhempa bikar bîne. Ji bo bêtir agahdarî li pirsgirêka #14868 û xeletiya WebKit #138192 binêre. Yek çareseriyek potansiyel CSS-ya jêrîn e:
@media print {
.container {
width: auto;
}
}Ji derveyî qutiyê, Android 4.1 (û tewra hin serbestberdanên nûtir jî xuya ye) bi sepana Gerokê re wekî geroka webê ya xwerû ya bijartî (li dijî Chrome) tê şandin. Mixabin, sepana Gerokê bi gelemperî bi CSS-ê re gelek xeletî û nakokî hene.
Li ser <select>hêmanan, gerokek stokê ya Android-ê ger hebe border-radiusû/an borderwere sepandin dê kontrolên alî nîşan nede. (Ji bo hûragahiyan li vê pirsa StackOverflow binêre.) Parçeya kodê ya li jêr bikar bînin da ku CSS- <select>ya sûcdar derxînin û li ser geroka stokê ya Android-ê wekî hêmanek neguhêz bikin. Sniffing nûnerê bikarhêner ji destwerdana gerokên Chrome, Safari û Mozilla dûr dikeve.
<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>Dixwazin mînakek bibînin? Vê demoya JS Bin kontrol bikin.
Ji bo ku ezmûna çêtirîn gengaz ji gerokên kevn û xelet re peyda bike, Bootstrap li gelek cihan hakên geroka CSS bikar tîne da ku CSS -ya taybetî ji hin guhertoyên gerokê re bike armanc da ku li dora xeletiyên di gerokên xwe de bixebite. Van hacks bi têgihîştin dibe sedem ku erêkerên CSS gilî bikin ku ew nederbasdar in. Di çend cihan de, em taybetmendiyên CSS-ê yên xwînrij ên ku hîn bi tevahî standardkirî ne jî bikar tînin, lê ev bi tenê ji bo pêşkeftina pêşkeftî têne bikar anîn.
Van hişyariyên erêkirinê di pratîkê de ne girîng in ji ber ku beşa ne-hacky ya CSS-a me bi tevahî dipejirîne û beşên hacky di xebata rast a beşa ne-hacky de mudaxele nakin, ji ber vê yekê em bi qestî van hişyariyên taybetî paşguh dikin.
Di heman demê de belgeyên me yên HTML-ê jî hin hişyariyên erêkirina HTML-ê yên piçûk û bêbandor hene ji ber tevlêbûna me ya çareseriyek ji bo xeletiyek Firefox-ê .