Porwyr a dyfeisiau
Dysgwch am y porwyr a'r dyfeisiau, o'r modern i'r hen, sy'n cael eu cefnogi gan Bootstrap, gan gynnwys quirks a chwilod hysbys ar gyfer pob un.
Mae Bootstrap yn cefnogi'r datganiadau sefydlog diweddaraf o'r holl brif borwyr a llwyfannau. Ar Windows, rydym yn cefnogi Internet Explorer 10-11 / Microsoft Edge .
Nid yw porwyr eraill sy'n defnyddio'r fersiwn diweddaraf o WebKit, Blink, neu Gecko, boed yn uniongyrchol neu drwy API gwedd gwe y platfform, yn cael eu cefnogi'n benodol. Fodd bynnag, dylai Bootstrap (yn y rhan fwyaf o achosion) arddangos a gweithredu'n gywir yn y porwyr hyn hefyd. Darperir gwybodaeth cymorth mwy penodol isod.
Gallwch ddod o hyd i'n hystod o borwyr a gefnogir a'u fersiynau yn einpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Rydym yn defnyddio Autoprefixer i drin cymorth porwr arfaethedig trwy ragddodiaid CSS, sy'n defnyddio Browserslist i reoli'r fersiynau porwr hyn. Ymgynghorwch â'u dogfennaeth i weld sut i integreiddio'r offer hyn i'ch prosiectau.
Yn gyffredinol, mae Bootstrap yn cefnogi'r fersiynau diweddaraf o borwyr rhagosodedig pob platfform mawr. Sylwch na chefnogir porwyr dirprwyol (fel Opera Mini, modd Turbo Opera Mobile, Porwr Mini UC, Amazon Silk).
| Chrome | Firefox | saffari | Porwr Android a WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Cefnogwyd | Cefnogwyd | Amh | Cefnogir Android v5.0+ | Cefnogwyd |
| iOS | Cefnogwyd | Cefnogwyd | Cefnogwyd | Amh | Cefnogwyd |
| Windows 10 Symudol | Amh | Amh | Amh | Amh | Cefnogwyd |
Yn yr un modd, cefnogir y fersiynau diweddaraf o'r rhan fwyaf o borwyr bwrdd gwaith.
| Chrome | Firefox | Rhyngrwyd archwiliwr | Microsoft Edge | Opera | saffari | |
|---|---|---|---|---|---|---|
| Mac | Cefnogwyd | Cefnogwyd | Amh | Amh | Cefnogwyd | Cefnogwyd |
| Ffenestri | Cefnogwyd | Cefnogwyd | Wedi'i gefnogi, IE10+ | Cefnogwyd | Cefnogwyd | Heb ei gefnogi |
Ar gyfer Firefox, yn ogystal â'r datganiad sefydlog arferol diweddaraf, rydym hefyd yn cefnogi fersiwn diweddaraf y Datganiad Cymorth Estynedig (ESR) o Firefox.
Yn answyddogol, dylai Bootstrap edrych ac ymddwyn yn ddigon da yn Chromium a Chrome ar gyfer Linux, Firefox ar gyfer Linux, ac Internet Explorer 9, er nad ydynt yn cael eu cefnogi'n swyddogol.
Am restr o rai o fygiau porwr y mae'n rhaid i Bootstrap fynd i'r afael â nhw, gweler ein Wal o chwilod porwr .
Cefnogir Internet Explorer 10+; Nid yw IE9 ac i lawr. Sylwch nad yw rhai eiddo CSS3 ac elfennau HTML5 yn cael eu cefnogi'n llawn yn IE10, neu fod angen priodweddau rhagosodedig ar gyfer swyddogaeth lawn. Ewch i A allaf ddefnyddio… i gael manylion am gefnogaeth porwr i nodweddion CSS3 a HTML5.
Os oes angen cefnogaeth IE8-9 arnoch, defnyddiwch Bootstrap 3. Dyma'r fersiwn fwyaf sefydlog o'n cod ac mae'n dal i gael ei gefnogi gan ein tîm ar gyfer atgyweiriadau nam hanfodol a newidiadau dogfennaeth. Fodd bynnag, ni fydd unrhyw nodweddion newydd yn cael eu hychwanegu ato.
Mae cefnogaeth overflow: hidden;ar gyfer yr <body>elfen yn eithaf cyfyngedig yn iOS ac Android. I'r perwyl hwnnw, pan fyddwch chi'n sgrolio heibio i frig neu waelod modal yn y naill borwr neu'r llall o'r dyfeisiau hynny, bydd y <body>cynnwys yn dechrau sgrolio. Gweler bug Chrome #175502 (yn sefydlog yn Chrome v40) a byg WebKit #153852 .
O iOS 9.2, tra bod moddol ar agor, os yw cyffyrddiad cychwynnol ystum sgrolio o fewn ffin testunol <input>neu <textarea>, bydd y <body>cynnwys o dan y moddol yn cael ei sgrolio yn lle'r moddol ei hun. Gweler byg WebKit #153856 .
Nid .dropdown-backdropyw'r elfen yn cael ei defnyddio ar iOS yn y nav oherwydd cymhlethdod y mynegeio z. Felly, i gau cwymplenni mewn bariau llywio, rhaid i chi glicio'n uniongyrchol ar y gwymplen (neu unrhyw elfen arall a fydd yn tanio digwyddiad clicio yn iOS ).
Mae chwyddo tudalennau yn anochel yn cyflwyno arteffactau rendro mewn rhai cydrannau, yn Bootstrap a gweddill y we. Yn dibynnu ar y mater, efallai y byddwn yn gallu ei drwsio (chwiliwch yn gyntaf ac yna agorwch broblem os oes angen). Fodd bynnag, rydym yn tueddu i anwybyddu'r rhain oherwydd yn aml nid oes ganddynt unrhyw ateb uniongyrchol heblaw am atebion haclyd.
Er :hovernad yw'n bosibl ar y mwyafrif o ddyfeisiau cyffwrdd, mae iOS yn efelychu'r ymddygiad hwn, gan arwain at arddulliau hofran “gludiog” sy'n parhau ar ôl tapio un elfen. Dim ond pan fydd defnyddwyr yn tapio elfen arall y caiff yr arddulliau hofran hyn eu dileu. Ystyrir bod yr ymddygiad hwn yn annymunol i raddau helaeth ac ymddengys nad yw'n broblem ar ddyfeisiau Android neu Windows.
Trwy gydol ein datganiadau v4 alpha a beta, fe wnaethom gynnwys cod anghyflawn a sylwadau ar gyfer optio i mewn i shim ymholiad cyfryngau a fyddai'n analluogi arddulliau hofran mewn porwyr dyfeisiau cyffwrdd sy'n efelychu hofran. Ni chafodd y gwaith hwn ei gwblhau na'i alluogi erioed, ond er mwyn osgoi toriad llwyr, rydym wedi dewis anghymeradwyo'r shim hwn a chadw'r cymysgeddau fel llwybrau byr ar gyfer y ffug-ddosbarthiadau.
Hyd yn oed mewn rhai porwyr modern, gall argraffu fod yn od.
O Safari v8.0, gall defnyddio'r dosbarth lled sefydlog .containerachosi i Safari ddefnyddio maint ffont anarferol o fach wrth argraffu. Gweler rhifyn #14868 a byg WebKit #138192 am ragor o fanylion. Un ateb posibl yw'r CSS canlynol:
@media print {
.container {
width: auto;
}
}Allan o'r bocs, mae Android 4.1 (a hyd yn oed rhai datganiadau mwy newydd yn ôl pob tebyg) yn anfon gyda'r app Porwr fel y porwr gwe rhagosodedig o ddewis (yn hytrach na Chrome). Yn anffodus, mae gan yr app Porwr lawer o fygiau ac anghysondebau gyda CSS yn gyffredinol.
Ar <select>elfennau, ni fydd porwr stoc Android yn arddangos y rheolyddion ochr os oes border-radiusa / neu bordergymhwyso. (Gweler y cwestiwn hwn StackOverflow am fanylion.) Defnyddiwch y pyt o god isod i gael gwared ar y CSS tramgwyddus a gwneud y <select>fel elfen unstyled ar y porwr stoc Android. Mae'r sniffian asiant defnyddiwr yn osgoi ymyrraeth â phorwyr Chrome, Safari a Mozilla.
<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>Eisiau gweld enghraifft? Edrychwch ar y demo JS Bin hwn.
Er mwyn darparu'r profiad gorau posibl i hen borwyr a bygi, mae Bootstrap yn defnyddio haciau porwr CSS mewn sawl man i dargedu CSS arbennig at rai fersiynau porwr er mwyn gweithio o gwmpas bygiau yn y porwyr eu hunain. Mae'r haciau hyn yn ddealladwy yn achosi dilyswyr CSS i gwyno eu bod yn annilys. Mewn cwpl o leoedd, rydym hefyd yn defnyddio nodweddion CSS ymyl gwaedu nad ydynt eto wedi'u safoni'n llawn, ond dim ond ar gyfer gwelliant cynyddol y defnyddir y rhain.
Nid yw'r rhybuddion dilysu hyn o bwys yn ymarferol gan fod y rhan nad yw'n haclyd o'n CSS yn dilysu'n llawn ac nid yw'r dognau haclyd yn ymyrryd â gweithrediad priodol y rhan nad yw'n haclyd, a dyna pam rydym yn anwybyddu'r rhybuddion penodol hyn yn fwriadol.
Yn yr un modd mae gan ein dogfennau HTML rai rhybuddion dilysu HTML dibwys ac anaml oherwydd ein bod wedi cynnwys datrysiad ar gyfer nam Firefox penodol .