Pūtirotiro me nga taputapu
Akohia mo nga kaitirotiro me nga taputapu, mai i nga wa hou ki nga tawhito, e tautokohia ana e Bootstrap, tae atu ki nga ahuatanga me nga pepeke mo ia tangata.
Ka tautokohia e Bootstrap nga putanga hou, pumau o nga kaitirotiro me nga papaaho nui katoa. I Windows, ka tautoko matou i te Internet Explorer 10-11 / Microsoft Edge .
Ko nga kaitirotiro rereke e whakamahi ana i te putanga hou o WebKit, Blink, Gecko ranei, ahakoa tika, ma te API tirohanga paetukutuku ranei, kaore e tino tautokona. Heoi, me whakaatu me te mahi tika a Bootstrap (i te nuinga o nga wa) i roto i enei kaitirotiro. Kei raro nei nga korero tautoko motuhake.
Ka kitea e koe a maatau momo tirotiro me o raatau putanga i roto i ta maataupackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Ka whakamahi matou i te Autoprefixer ki te hapai i te tautoko tirotiro ma te CSS prefix, e whakamahi ana i te Rarangi Tirotiro hei whakahaere i enei putanga tirotiro. Tirohia o raatau tuhinga mo te whakauru i enei taputapu ki o kaupapa.
Ko te tikanga, kei te tautoko a Bootstrap i nga putanga hou o nga kaitirotiro taunoa o ia turanga matua. Kia mahara ko nga kaitirotiro takawaenga (penei i te Opera Mini, te aratau Turbo o Opera Mobile, UC Browser Mini, Amazon Silk) kaore i te tautokohia.
| Chrome | Firefox | Safari | Pūtirotiro Android me te Tirohanga Tukutuku | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Tautokohia | Tautokohia | N/A | Android v5.0+ tautokona | Tautokohia |
| iOS | Tautokohia | Tautokohia | Tautokohia | N/A | Tautokohia |
| Windows 10 Pūkoro | N/A | N/A | N/A | N/A | Tautokohia |
Waihoki, kei te tautokohia nga putanga hou o te nuinga o nga kaitirotiro papamahi.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Tautokohia | Tautokohia | N/A | N/A | Tautokohia | Tautokohia |
| Matapihi | Tautokohia | Tautokohia | Tautokohia, IE10+ | Tautokohia | Tautokohia | Kaore i te tautokona |
Mo Firefox, i tua atu i te tukunga pumau hou, ka tautokohia e matou te putanga hou o te Whakaputa Tautoko Whakaroa (ESR) o Firefox.
Ma te kore mana, me titiro pai a Bootstrap ki Chromium me Chrome mo Linux, Firefox mo Linux, me Internet Explorer 9, ahakoa kaore i te tautoko mana.
Mo te rarangi o etahi o nga pepeke tirotiro e tika ana a Bootstrap, tirohia ta maatau pakitara o nga pepeke tirotiro .
Kei te tautokohia a Internet Explorer 10+; Ko te IE9 me raro kaore. Kia mohio koe ko etahi o nga taonga CSS3 me nga huānga HTML5 kaore i te tino tautokona i IE10, me hiahia ranei nga waahanga kua tohua mo te mahi katoa. Tirohia Ka taea e au te whakamahi… mo nga korero mo te tautoko tirotiro mo nga ahuatanga CSS3 me HTML5.
Mena ka hiahia koe ki te tautoko IE8-9, whakamahia te Bootstrap 3. Koinei te putanga tino pumau o to maatau waehere, kei te tautokohia tonutia e to taatau roopu mo nga whakatikatika bug tino nui me nga huringa tuhinga. Heoi, karekau he ahuatanga hou ka taapiri atu ki a ia.
Ko te tautoko mo overflow: hidden;te <body>huānga he iti noa i roto i te iOS me te Android. Ki tera mutunga, ka panuku koe i te taha ki runga, ki raro ranei o te aratau i roto i tetahi o nga kaitirotiro o aua taputapu, <body>ka timata nga korero ki te panuku. Tirohia te pepeha Chrome #175502 (kua mau ki te Chrome v40) me te bug WebKit #153852 .
Mai i te iOS 9.2, i te wa e tuwhera ana te aratau, mena ko te pa tuatahi o te tohu panuku kei roto i te rohe o te tuhinga <input>, o te <textarea>, ko nga <body>ihirangi kei raro i te aratau ka panuku hei utu mo te aratau ake. Tirohia te bug WebKit #153856 .
Karekau te .dropdown-backdrophuānga e whakamahia ki runga iOS i te nav na te uaua o te tohu-z. No reira, ki te kati i nga takaiho i roto i nga pae whakaterenga, me paato tika koe i te huānga takaiho ( tetahi atu huānga ranei ka puhipuhi i te takahanga paato i iOS ).
Ko te topa o te wharangi ka whakaatu i nga mahi toi i etahi waahanga, kei Bootstrap me era atu o te paetukutuku. I runga i te take, ka taea pea e taatau te whakatika (rapu tuatahi ka whakatuwherahia he take mena e tika ana). Heoi, ka warewarehia e matou enei na te mea he maha nga wa kaore he otinga tika i tua atu i nga mahi hacky.
Ahakoa :hoverkaore e taea i runga i te nuinga o nga taputapu pa, ka peehia e iOS tenei whanonga, ka puta he ahua "piri" ka mau tonu i muri i te paato i tetahi huānga. Ka tangohia enei momo whakaparo ka paopao nga kaiwhakamahi ki tetahi atu huānga. Ko tenei whanonga e kiia ana he kino te ahua me te ahua kaore he take i runga i nga taputapu Android, Windows ranei.
I roto i a maatau putanga v4 alpha me te beta, i whakaurua e matou he waehere kaore i oti me te korero mo te whakauru ki roto i te uira patai pāpāho ka whakakore i nga momo whakaparo i roto i nga kaitirotiro taputapu pa e whai ana i te toronga. Ko tenei mahi kaore i tino oti, i whakahohea ranei, engari kia kore e pakaru katoa, kua whiriwhiria e matou ki te whakakore i tenei tohu me te pupuri i nga whakauru hei pokatata mo nga karaehe pseudo.
Ahakoa i roto i etahi kaitirotiro hou, he rereke te tuhi.
Mai i te Safari v8.0, .containerka taea e Safari te whakamahi i te karaehe whanui-whanui ka whakamahi a Safari i te rahi momotuhi iti i te wa e ta ana. Tirohia te take #14868 me WebKit bug #138192 mo etahi atu korero. Ko tetahi o nga mahi ka taea ko te CSS e whai ake nei:
@media print {
.container {
width: auto;
}
}I waho o te pouaka, ka tukuna a Android 4.1 (me etahi o nga putanga hou) me te taupānga Tirotiro hei kaitirotiro paetukutuku taunoa (he rereke ki a Chrome). Kia aroha mai, he maha nga pepeke me nga rerekee ki te CSS i te nuinga o te waa.
I runga <select>i nga huānga, kaore te kaitirotiro kararehe Android e whakaatu i nga mana taha mena he tono border-radiusme te / ranei border. (Tirohia tenei patai StackOverflow mo nga taipitopito.) Whakamahia te mahanga o te waehere i raro nei hei tango i te CSS kino me te <select>whakaputa i te huānga kore-ahua i runga i te tirotiro kararehe Android. Ko te hongi a te kaihoko kaiwhakamahi ka karo i te pokanoa ki nga kaitirotiro Chrome, Safari, me 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>Kei te hiahia koe ki te kite i tetahi tauira? Tirohia tenei whakaaturanga JS Bin.
Hei whakarato i te wheako tino pai ki nga kaitirotiro tawhito me nga kaitirotiro, ka whakamahi a Bootstrap i nga hacks tirotiro tirotiro CSS i nga waahi maha ki te aro ki te CSS motuhake ki etahi putanga tirotiro kia pai ai te mahi i nga pepeke i roto i nga kaitirotiro ake. Ko enei hacks ka tino amuamu nga kaiwhakamana CSS he muhu. I etahi waahi takirua, ka whakamahia ano e matou nga ahuatanga CSS whakaheke toto kaore ano kia tino paerewahia, engari ka whakamahia noa enei mo te whakapai haere.
Ko enei whakatupato whakamana karekau he aha i roto i nga mahi na te mea ko te waahanga kore-hacky o to tatou CSS ka tino whakamana, karekau hoki nga wahanga hacky e pokanoa ki te mahi tika o te wahanga kore-hacky, no reira he aha tatou ka aro ki enei whakatupato.
Kei a maatau tuhinga HTML etahi whakatupatotanga whakamana HTML iti me te kore whai hua na te whakaurunga o te mahi whakatika mo tetahi bug Firefox .