Browsers thiab khoom siv
Kawm txog cov browsers thiab cov khoom siv, txij li niaj hnub mus rau qub, uas tau txais kev txhawb nqa los ntawm Bootstrap, suav nrog cov paub quirks thiab kab rau txhua tus.
Bootstrap txhawb nqa qhov tseeb, ruaj khov tso tawm ntawm txhua qhov loj browsers thiab platforms. Ntawm Windows, peb txhawb Internet Explorer 10-11 / Microsoft Edge .
Lwm qhov browsers uas siv qhov tseeb version ntawm WebKit, Blink, lossis Gecko, txawm tias ncaj qha lossis los ntawm lub platform lub vev xaib saib API, tsis txaus siab. Txawm li cas los xij, Bootstrap yuav tsum (feem ntau) tso saib thiab ua haujlwm kom raug hauv cov browsers no thiab. Cov ntaub ntawv txhawb nqa tshwj xeeb muaj qhia hauv qab no.
Koj tuaj yeem pom peb qhov kev txhawb nqa ntawm browsers thiab lawv cov versions hauv pebpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Peb siv Autoprefixer los tswj qhov kev txhawb nqa browser ntawm CSS prefixes, uas siv Browserslist los tswj cov browser versions. Tham nrog lawv cov ntaub ntawv rau yuav ua li cas koom ua ke cov cuab yeej no rau hauv koj qhov project.
Feem ntau hais lus, Bootstrap txhawb nqa qhov tseeb versions ntawm txhua lub platform loj lub neej ntawd browsers. Nco ntsoov tias cov browsers npe (xws li Opera Mini, Opera Mobile's Turbo hom, UC Browser Mini, Amazon Silk) tsis txaus siab.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Txhawb nqa | Txhawb nqa | N/A | Android v5.0+ txhawb nqa | Txhawb nqa |
| iOS no | Txhawb nqa | Txhawb nqa | Txhawb nqa | N/A | Txhawb nqa |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Txhawb nqa |
Ib yam li ntawd, qhov tseeb versions ntawm feem ntau desktop browsers tau txais kev txhawb nqa.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Txhawb nqa | Txhawb nqa | N/A | N/A | Txhawb nqa | Txhawb nqa |
| Qhov rai | Txhawb nqa | Txhawb nqa | Txhawb nqa, IE10+ | Txhawb nqa | Txhawb nqa | Tsis txhawb |
Rau Firefox, ntxiv rau qhov kev tso tawm ruaj khov tshiab kawg, peb kuj txhawb nqa qhov tseeb Extended Support Release (ESR) version ntawm Firefox.
Unofficially, Bootstrap yuav tsum saib thiab coj tus cwj pwm zoo txaus hauv Chromium thiab Chrome rau Linux, Firefox rau Linux, thiab Internet Explorer 9, txawm tias lawv tsis tau txais kev txhawb nqa.
Rau ib daim ntawv teev npe ntawm qee qhov browser kab mob uas Bootstrap yuav tsum tau rub nrog, saib peb phab ntsa ntawm browser kab .
Internet Explorer 10+ txhawb nqa; IE9 thiab down tsis yog. Thov nco ntsoov tias qee qhov CSS3 cov khoom thiab HTML5 cov ntsiab lus tsis txaus siab rau hauv IE10, lossis xav tau cov khoom ua ntej rau kev ua haujlwm tag nrho. Mus saib Kuv tuaj yeem siv… kom paub meej txog kev txhawb nqa browser ntawm CSS3 thiab HTML5 nta.
Yog tias koj xav tau IE8-9 kev txhawb nqa, siv Bootstrap 3. Nws yog qhov ruaj khov tshaj plaws ntawm peb cov cai thiab tseem muaj kev txhawb nqa los ntawm peb pab neeg rau kev kho cov kab mob tseem ceeb thiab cov ntaub ntawv hloov pauv. Txawm li cas los xij, tsis muaj cov yam ntxwv tshiab yuav ntxiv rau nws.
Kev them nyiaj yug rau overflow: hidden;ntawm lub <body>caij yog heev txwv nyob rau hauv iOS thiab Android. Txog qhov kawg, thaum koj scroll dhau los ntawm sab saum toj lossis hauv qab ntawm lub modal hauv ob qho ntawm cov khoom siv 'browser, cov <body>ntsiab lus yuav pib scroll. Saib Chrome kab #175502 (tso nyob rau hauv Chrome v40) thiab WebKit kab #153852 .
Raws li ntawm iOS 9.2, thaum lub modal qhib, yog tias qhov pib kov ntawm ib qho taw qhia scroll nyob rau hauv ciam teb ntawm cov ntawv nyeem <input>lossis a <textarea>, cov <body>ntsiab lus hauv qab lub modal yuav scrolled es tsis txhob ntawm tus qauv nws tus kheej. Saib WebKit kab mob #153856 .
Lub .dropdown-backdropcaij tsis siv rau iOS no hauv nav vim qhov nyuaj ntawm z-indexing. Yog li, txhawm rau kaw cov dropdowns hauv navbars, koj yuav tsum ncaj qha nyem qhov poob qis (lossis lwm yam khoom uas yuav tua cov kev tshwm sim nyem hauv iOS ).
Nplooj ntawv zooming inevitably nthuav qhia cov khoom cuav hauv qee cov khoom, ob qho tib si hauv Bootstrap thiab lwm lub vev xaib. Nyob ntawm qhov teeb meem, peb tuaj yeem kho nws (nrhiav ua ntej thiab qhib qhov teeb meem yog tias xav tau). Txawm li cas los xij, peb nyiam tsis quav ntsej cov no vim lawv feem ntau tsis muaj kev daws teeb meem uas tsis yog hacky workarounds.
Thaum :hovertsis muaj peev xwm ntawm cov khoom siv kov feem ntau, iOS emulates tus cwj pwm no, ua rau "nqa" hover styles uas pheej mus tom qab tapping ib lub caij. Cov hom hover no tsuas yog muab tshem tawm thaum cov neeg siv coj mus rhaub lwm lub caij. Tus cwj pwm no yog suav tias yog qhov tsis xav tau ntau thiab zoo li tsis yog qhov teeb meem ntawm Android lossis Windows li.
Thoob plaws hauv peb cov v4 alpha thiab beta tso tawm, peb suav nrog tsis tiav thiab tawm tswv yim tawm code rau kev xaiv rau hauv cov lus nug xov xwm shim uas yuav lov tes taw hover styles nyob rau hauv kov ntaus browsers uas emulate hovering. Txoj hauj lwm no yeej tsis tau ua tiav tag nrho lossis qhib, tab sis kom tsis txhob ua tiav kev tawg, peb tau xaiv los txiav txim siab qhov no thiab khaws cov mixins ua shortcuts rau pseudo-chav kawm.
Txawm nyob hauv qee qhov browsers niaj hnub no, luam ntawv tuaj yeem ua qhov txawv txav.
Raws li ntawm Safari v8.0, kev siv cov chav kawm tas-dav .containertuaj yeem ua rau Safari siv qhov txawv me me font loj thaum luam ntawv. Saib qhov teeb meem #14868 thiab WebKit kab #138192 kom paub meej ntxiv. Ib qho kev daws teeb meem muaj peev xwm yog CSS hauv qab no:
@media print {
.container {
width: auto;
}
}Tawm ntawm lub thawv, Android 4.1 (thiab txawm tias qee qhov kev tshaj tawm tshiab pom meej) xa nrog Browser app raws li lub vev xaib browser xaiv (tsis yog Chrome). Hmoov tsis zoo, Browser app muaj ntau cov kab thiab tsis sib xws nrog CSS feem ntau.
Ntawm <select>cov ntsiab lus, Android Tshuag browser yuav tsis tso saib cov kev tswj hwm sab yog tias muaj border-radiusthiab / lossis bordersiv. (Saib cov lus nug StackOverflow no kom paub meej.) Siv cov snippet ntawm cov cai hauv qab no kom tshem tawm CSS ua txhaum cai thiab muab cov <select>khoom ua tsis zoo ntawm Android Tshuag browser. Tus neeg siv tus neeg sawv cev sniffing zam kev cuam tshuam nrog Chrome, Safari, thiab Mozilla browsers.
<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>Xav pom ib qho piv txwv? Mus saib no JS Bin demo.
Txhawm rau muab cov kev paub zoo tshaj plaws rau cov laus thiab cov neeg tsis pom zoo, Bootstrap siv CSS browser hacks hauv ntau qhov chaw txhawm rau tsom CSS tshwj xeeb rau qee qhov browser versions txhawm rau ua haujlwm nyob ib puag ncig cov kab hauv browsers lawv tus kheej. Cov hacks no nkag siab ua rau CSS validators yws tias lawv tsis raug. Nyob rau hauv ob peb qhov chaw, peb kuj siv los ntshav-ntug CSS nta uas tseem tsis tau tag nrho cov qauv, tab sis cov no yog siv dawb huv rau kev nce qib.
Cov lus ceeb toom kev lees paub no tsis muaj teeb meem hauv kev xyaum txij li qhov tsis yog hacky ntawm peb CSS tau siv tau tag nrho thiab cov feem hacky tsis cuam tshuam nrog kev ua haujlwm zoo ntawm qhov tsis yog hacky, yog li vim li cas peb txhob txwm tsis quav ntsej cov lus ceeb toom tshwj xeeb no.
Peb cov ntaub ntawv HTML ib yam li muaj qee qhov tsis tseem ceeb thiab tsis tsim nyog HTML validation ceeb toom vim peb suav nrog kev ua haujlwm rau qee yam kab mob Firefox .