Selaimet ja laitteet
Opi Bootstrapin tukemista selaimista ja laitteista nykyaikaisista vanhoihin, mukaan lukien kunkin tunnetut omituisuudet ja bugit.
Bootstrap tukee kaikkien tärkeimpien selainten ja alustojen uusimpia, vakaita julkaisuja . Windowsissa tuemme Internet Explorer 10-11 / Microsoft Edgeä .
Vaihtoehtoisia selaimia, jotka käyttävät WebKitin, Blinkin tai Geckon uusinta versiota joko suoraan tai alustan verkkonäkymän API:n kautta, ei tueta erikseen. Bootstrapin pitäisi kuitenkin (useimmissa tapauksissa) näyttää ja toimia oikein myös näissä selaimissa. Tarkempia tukitietoja on alla.
Löydät tuetut selaimet ja niiden versiot osoitteestapackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Käytämme Autoprefixeria käsittelemään aiottua selaintukea CSS-etuliitteillä, joka käyttää Browserslistia näiden selainversioiden hallintaan. Katso heidän dokumentaatiostaan, kuinka voit integroida nämä työkalut projekteihisi.
Yleisesti ottaen Bootstrap tukee uusimpia versioita kunkin suuren alustan oletusselaimista. Huomaa, että välitysselaimia (kuten Opera Mini, Opera Mobilen Turbo-tila, UC Browser Mini, Amazon Silk) ei tueta.
| Kromi | Firefox | Safari | Android-selain ja WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Tuettu | Tuettu | Ei käytössä | Android v5.0+ tuettu | Tuettu |
| iOS | Tuettu | Tuettu | Tuettu | Ei käytössä | Tuettu |
| Windows 10 Mobile | Ei käytössä | Ei käytössä | Ei käytössä | Ei käytössä | Tuettu |
Samoin useimpien työpöytäselaimien uusimmat versiot ovat tuettuja.
| Kromi | Firefox | Internet Explorer | Microsoft Edge | Ooppera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Tuettu | Tuettu | Ei käytössä | Ei käytössä | Tuettu | Tuettu |
| Windows | Tuettu | Tuettu | Tuettu, IE10+ | Tuettu | Tuettu | Ei tueta |
Firefoxille tuemme uusimman normaalin vakaan julkaisun lisäksi myös Firefoxin uusinta Extended Support Release (ESR) -versiota.
Epävirallisesti Bootstrapin pitäisi näyttää ja toimia riittävän hyvin Chromiumissa ja Chrome for Linuxissa, Firefox for Linuxissa ja Internet Explorer 9:ssä, vaikka niitä ei virallisesti tueta.
Luettelo joistakin selainvirheistä, joita Bootstrap joutuu kamppailemaan, on selainvirheiden seinässämme .
Internet Explorer 10+ on tuettu; IE9 ja alaspäin ei ole. Huomaa, että joitain CSS3-ominaisuuksia ja HTML5-elementtejä ei tueta täysin IE10:ssä tai ne vaativat etuliitteitä ominaisuuksien täyttämiseksi. Vieraile Voinko käyttää… saadaksesi lisätietoja selaimen CSS3- ja HTML5-ominaisuuksien tuesta.
Jos tarvitset IE8-9-tukea, käytä Bootstrap 3 :a. Se on koodimme vakain versio, ja tiimimme tukee sitä edelleen kriittisten virheenkorjausten ja dokumentaatiomuutosten osalta. Siihen ei kuitenkaan lisätä uusia ominaisuuksia.
Elementin tuki overflow: hidden;on <body>melko rajallista iOS:ssä ja Androidissa. <body>Tätä tarkoitusta varten sisältö alkaa rullata , kun vierität modaalin ylä- tai alareunaa kummassa tahansa näiden laitteiden selaimessa . Katso Chrome-virhe #175502 (korjattu Chrome v40:ssä) ja WebKit-virhe #153852 .
IOS 9.2:sta lähtien modaalin ollessa auki, jos vierityseleen ensimmäinen kosketus on tekstin <input>tai tekstin rajojen sisällä <textarea>, modaalin alla olevaa <body>sisältöä vieritetään itse modaalin sijaan. Katso WebKit-virhe #153856 .
Elementtiä .dropdown-backdropei käytetä iOS:ssä navissa z-indeksoinnin monimutkaisuuden vuoksi. Suljeksesi navigointipalkkien avattavat valikot sinun on siis napsautettava suoraan avattavaa elementtiä (tai mitä tahansa muuta elementtiä, joka käynnistää napsautustapahtuman iOS:ssä ).
Sivun zoomaus aiheuttaa väistämättä renderöintiartefakteja joissakin komponenteissa, sekä Bootstrapissa että muualla verkossa. Ongelmasta riippuen voimme ehkä korjata sen (hae ensin ja avaa ongelma sitten tarvittaessa). Meillä on kuitenkin tapana jättää nämä huomiotta, koska niillä ei usein ole muuta suoraa ratkaisua kuin hakkeroituja ratkaisuja.
Vaikka :hoverse ei ole mahdollista useimmissa kosketuslaitteissa, iOS emuloi tätä toimintaa, mikä johtaa "tahmeisiin" hover-tyyleihin, jotka säilyvät yhden elementin napautuksen jälkeen. Nämä hiirityylit poistetaan vain, kun käyttäjät napauttavat toista elementtiä. Tätä toimintaa pidetään suurelta osin ei-toivottavana, eikä se näytä olevan ongelma Android- tai Windows-laitteissa.
Kaikkiin v4 alfa- ja betaversioihimme sisällytimme epätäydellistä ja kommentoitua koodia mediakyselyn välityslevyn ottamiseksi käyttöön, joka poistaisi hiirityylejä kosketuslaitteiden selaimissa, jotka emuloivat leijumista. Tätä työtä ei koskaan saatu kokonaan valmiiksi tai otettu käyttöön, mutta välttääksemme täydellisen rikkoutumisen olemme päättäneet poistaa tämän välilevyn käytöstä ja pitää mixinit pseudo-luokkien pikakuvakkeina.
Jopa joissakin nykyaikaisissa selaimissa tulostaminen voi olla omituista.
Safari v8.0:sta lähtien kiinteän leveyden .containerluokan käyttö voi saada Safarin käyttämään epätavallisen pientä kirjasinkokoa tulostettaessa. Katso numero 14868 ja WebKit bugi nro 138192 saadaksesi lisätietoja. Yksi mahdollinen kiertotapa on seuraava CSS:
@media print {
.container {
width: auto;
}
}Android 4.1 (ja ilmeisesti jopa jotkin uudemmat julkaisut) toimitetaan oletusselaimena selainsovelluksella (toisin kuin Chromella). Valitettavasti selainsovelluksessa on paljon virheitä ja epäjohdonmukaisuuksia yleisesti CSS:n kanssa.
<select>Elementtien kohdalla Android-osakeselain ei näytä sivusäätimiä, jos niitä on ja border-radius/tai borderkäytössä. (Katso lisätietoja tästä StackOverflow-kysymyksestä .) Käytä alla olevaa koodinpätkää poistaaksesi loukkaava CSS ja hahmonna se <select>tyylittömänä elementtinä Android-selaimessa. Käyttäjäagentin nuuskiminen välttää häiriöt Chrome-, Safari- ja Mozilla-selaimiin.
<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>Haluatko nähdä esimerkin? Katso tämä JS Bin -demo.
Tarjotakseen parhaan mahdollisen käyttökokemuksen vanhoille ja bugiisille selaimille Bootstrap käyttää CSS-selainhakkeja useissa paikoissa kohdistaakseen erityistä CSS:ää tiettyihin selainversioihin kiertääkseen itse selaimissa esiintyviä vikoja. Nämä hakkerit saavat ymmärrettävästi CSS-validaattorit valittamaan, että ne ovat virheellisiä. Muutamassa paikassa käytämme myös huippuluokan CSS-ominaisuuksia, joita ei ole vielä täysin standardoitu, mutta niitä käytetään puhtaasti progressiiviseen parantamiseen.
Näillä vahvistusvaroituksilla ei ole käytännössä merkitystä, koska CSS:n ei-hakkeroitu osa validoituu täysin, eivätkä hakkeroidut osat häiritse ei-hakkeroituneen osan asianmukaista toimintaa, minkä vuoksi jätämme nämä varoitukset tarkoituksella huomiotta.
HTML-dokumenteissamme on myös joitain triviaaleja ja merkityksettömiä HTML-tarkistusvaroituksia, koska sisällytimme kiertotavan tietylle Firefox-virheelle .