Su'esu'e ma masini
A'oa'o e uiga i su'esu'ega ma masini, mai fa'aonaponei e o'o i le tuai, o lo'o lagolagoina e Bootstrap, e aofia ai quirks ma bugs mo ta'itasi.
E lagolagoina e Bootstrap fa'asalalauga fou ma mautu o su'esu'ega tetele uma ma fa'avae. I luga o Windows, matou te lagolagoina Internet Explorer 10-11 / Microsoft Edge .
O isi su'esu'ega o lo'o fa'aogaina le WebKit, Blink, po'o Gecko, pe tu'u sa'o po'o ala i luga ole laiga ole upegatafa'ilagi API, e le o lagolagoina manino. Ae ui i lea, Bootstrap e tatau (i le tele o tulaga) faʻaalia ma galue saʻo i nei suʻesuʻega. O fa'amatalaga lagolago fa'apitoa o lo'o tu'uina atu i lalo.
E mafai ona e mauaina le tele o su'esu'ega lagolago ma a latou fa'aliliuga i la matoupackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Matou te fa'aogaina le Autoprefixer e fa'atautaia ai le lagolago mo su'esu'ega e ala ile CSS prefix, lea e fa'aogaina ai le Browserslist e fa'atautaia ai nei su'esu'ega. Fa'afeso'ota'i a latou fa'amaumauga mo le tu'ufa'atasia o nei mea faigaluega i au galuega.
I le tulaga masani, e lagolagoina e Bootstrap lomiga fou o su'esu'ega fa'aletonu ta'itasi. Manatua o su'esu'ega sui (pei o le Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) e le lagolagoina.
| Chrome | Firefox | Safari | Android Su'esu'e ma WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Lagolagoina | Lagolagoina | N/A | Android v5.0+ lagolago | Lagolagoina |
| iOS | Lagolagoina | Lagolagoina | Lagolagoina | N/A | Lagolagoina |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Lagolagoina |
E fa'apena fo'i, o lo'o lagolagoina fo'i fa'amatalaga lata mai o le tele o su'esu'ega o le desktop.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Lagolagoina | Lagolagoina | N/A | N/A | Lagolagoina | Lagolagoina |
| Pupuni | Lagolagoina | Lagolagoina | Lagolago, IE10+ | Lagolagoina | Lagolagoina | Le lagolagoina |
Mo Firefox, fa'aopoopo i le fa'asalalauga fa'amaumau masani, matou te lagolagoina fo'i le fa'amatalaga lata mai o le Extended Support Release (ESR) a Firefox.
E le aloaia, Bootstrap e tatau ona foliga lelei ma amio lelei i Chromium ma Chrome mo Linux, Firefox mo Linux, ma Internet Explorer 9, e ui lava e le o lagolagoina aloaia.
Mo se lisi o nisi o masini suʻesuʻe e tatau ona tauivi ma Bootstrap, vaʻai i le matou Wall of browser bugs .
Internet Explorer 10+ e lagolagoina; IE9 ma lalo e leai. Fa'amolemole ia nofouta o nisi o meatotino CSS3 ma elemene HTML5 e le'o lagolagoina atoatoa ile IE10, pe mana'omia mea fa'apipi'i mo le fa'atinoina atoatoa. Asiasi E mafai ona ou fa'aogaina... mo fa'amatalaga ile lagolago ole su'esu'e ole CSS3 ma HTML5.
Afai e te manaʻomia le lagolago a le IE8-9, faʻaaoga le Bootstrap 3. O le faʻamaumauga sili ona mautu o la matou code ma o loʻo lagolagoina pea e la matou 'au mo faʻafitauli faʻaletonu ma suiga o faʻamaumauga. Ae ui i lea, e leai ni foliga fou o le a faʻaopoopoina i ai.
Lagolago mo overflow: hidden;luga ole <body>elemene e faʻatapulaʻaina ile iOS ma le Android. I lena tulaga, pe a e taʻavale i tua i luga poʻo le pito i lalo o se auala i soʻo se tasi o na masini suʻesuʻe, o le <body>a amata ona taʻavale le anotusi. Va'ai Chrome bug #175502 (fa'amau i Chrome v40) ma WebKit bug #153852 .
E tusa ai ma le iOS 9.2, a'o tatala se auala, pe afai o le paʻi muamua o se tusi taʻavale o loʻo i totonu o le tuaoi o se tusitusiga <input>poʻo se <textarea>, o <body>mea o loʻo i lalo o le modal o le a taʻavale nai lo le auala lava ia. Va'ai WebKit bug #153856 .
E .dropdown-backdrople fa'aogaina le elemene ile iOS ile nav ona o le lavelave ole z-indexing. O lea la, ina ia tapunia pa'ū i lalo navbars, e tatau ona e kiliki saʻo le pa'ū elemene elemene (poʻo soʻo se isi elemene e faʻapupulaina ai se kiliki mea na tupu i iOS ).
O le fa'aliga o itulau e mautinoa lava e fa'aalia ai le tu'uina atu o mea taulima i nisi vaega, i totonu o Bootstrap ma isi vaega o le upega tafa'ilagi. Faʻalagolago i le mataupu, atonu e mafai ona matou faʻaleleia (saili muamua ona tatala lea o se mataupu pe a manaʻomia). Ae ui i lea, e masani ona tatou le amanaiaina nei mea ona e masani ona leai ni fofo tuusaʻo e ese mai i le hacky workarounds.
E ui ina :hoverle mafai i le tele o masini pa'i, iOS e fa'ata'ita'i i lenei amio, e i'u ai i sitaili fa'apipi'i "pi'i" e fa'aauau pea pe a uma ona tata se tasi elemene. O nei sitaili fa'afefe e na'o le aveeseina pe a o'o e tagata fa'aoga se isi elemene. O lenei amio e manatu tele e le mana'omia ma e foliga mai e le o se fa'afitauli i masini Android po'o Windows.
I la matou fa'asalalauga uma o le v4 alpha ma le beta, na matou fa'aofia ai le fa'ailoga e le'i atoatoa ma fa'ailoa mai mo le filifili i totonu o se fa'amatalaga fa'asalalau fa'asalalau e fa'amalo ai sitaili fa'afefe i masini su'esu'e masini e fa'aa'oa'o i le fa'afefe. O lenei galuega e leʻi maeʻa atoatoa pe mafai, ae ina ia aloese mai le malepelepe atoatoa, ua matou filifili e faʻaumatia lenei shim ma faʻatumauina faʻafefiloi e fai ma ala pupuu mo vasega faʻailoga.
E oo lava i nisi suʻesuʻega faʻaonaponei, lolomi e mafai ona faʻafefe.
E pei o le Safari v8.0, o le fa'aogaina o le .containervasega fa'amautu-lautele e mafai ona fa'aogaina ai e Safari se fa'aoga la'ititi la'ititi pe a lolomi. Va'ai le lomiga #14868 ma WebKit bug #138192 mo nisi fa'amatalaga. O se tasi e mafai ona faʻaogaina o le CSS lea:
@media print {
.container {
width: auto;
}
}I fafo atu o le pusa, Android 4.1 (ma e oʻo lava i nisi faʻasalalauga fou e foliga mai) faʻatasi ma le Browser app e avea o le upega tafaʻilagi le lelei o filifiliga (e ese mai le Chrome). O le mea e leaga ai, o le Browser app e tele naua ma faʻalavelave ma le CSS lautele.
I luga o <select>elemene, o le a le faʻaalia e le suʻesuʻega o oloa a le Android le faʻatonuga o le itu pe a iai se border-radiusma / pe borderfaʻaaogaina. (Vaai i lenei fesili StackOverflow mo faʻamatalaga.) Faʻaaoga le snippet of code o loʻo i lalo e aveese ai le CSS solitulafono ma faʻaalia <select>e avea o se elemene e le faʻaalia i luga o le suʻega o oloa Android. Ole sogisogi ole tagata fa'aoga e aloese mai le fa'alavelave ile Chrome, Safari, ma 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>E te fia va'ai i se fa'ata'ita'iga? Siaki lenei JS Bin demo.
Ina ia mafai ona maua le poto masani sili ona lelei i suʻesuʻega tuai ma taʻavale, e faʻaogaina e Bootstrap hacks suʻesuʻe CSS i le tele o nofoaga e faʻatatau ai le CSS faʻapitoa i nisi o suʻega suʻesuʻe ina ia mafai ai ona faʻaogaina faʻamau i totonu o latou lava suʻesuʻega. O nei hacks ma le malamalama e mafua ai ona faitio tagata faʻamaonia CSS e le aoga. I ni nofoaga se lua, matou te fa'aogaina fo'i vaega CSS e le'i fa'ata'atia atoatoa, ae o lo'o fa'aogaina mo le fa'aleleia atili.
O nei lapataiga faʻamaonia e le afaina i le faʻatinoga talu ai o le vaega e le-hacky o la tatou CSS e faʻamaonia atoatoa ma o vaega hacky e le faʻalavelave i le faʻaogaina lelei o le vaega e le-hacky, o le mea lea tatou te le amanaiaina ai nei lapataiga faapitoa.
O a matou HTML docs foi e iai ni lapataiga faʻamaonia HTML e le taua ma e le taua ona o lo matou faʻaofiina o se fofo mo se pusa Firefox patino .