Nā polokalamu kele pūnaewele
E aʻo e pili ana i nā mākaʻikaʻi a me nā mea hana, mai kēia manawa a hiki i ka wā kahiko, i kākoʻo ʻia e Bootstrap, me nā quirks a me nā pōpoki i ʻike ʻia no kēlā me kēia.
Kākoʻo ʻo Bootstrap i nā mea hou a paʻa i hoʻokuʻu ʻia o nā polokalamu kele nui a me nā paepae. Ma Windows, kākoʻo mākou iā Internet Explorer 10-11 / Microsoft Edge .
ʻAʻole kākoʻo ʻia nā polokalamu kele pūnaewele ʻē aʻe e hoʻohana ana i ka mana hou loa o WebKit, Blink, a i ʻole Gecko, inā pololei a ma o ka API ʻike pūnaewele o ka platform. Eia naʻe, pono ʻo Bootstrap (i ka hapanui o nā hihia) e hōʻike a hana pololei i kēia mau polokalamu kele pūnaewele. Hāʻawi ʻia nā ʻike kākoʻo kikoʻī hou aʻe ma lalo nei.
Ma ka ʻōlelo maʻamau, kākoʻo ʻo Bootstrap i nā mana hou loa o kēlā me kēia pūnaewele paʻamau. E ʻike ʻaʻole kākoʻo ʻia nā polokalamu kele pūnaewele (e like me Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk).
| Chrome | Firefox | Safari | Kelepona Android & Nānā Pūnaewele | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Kākoʻo ʻia | Kākoʻo ʻia | N/A | Kākoʻo ʻia ka Android v5.0+ | Kākoʻo ʻia |
| IOS | Kākoʻo ʻia | Kākoʻo ʻia | Kākoʻo ʻia | N/A | Kākoʻo ʻia |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Kākoʻo ʻia |
Pēlā nō, kākoʻo ʻia nā mana hou loa o ka hapa nui o nā polokalamu kele pūnaewele.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | ʻOpera | Safari | |
|---|---|---|---|---|---|---|
| ʻO Mac | Kākoʻo ʻia | Kākoʻo ʻia | N/A | N/A | Kākoʻo ʻia | Kākoʻo ʻia |
| Windows | Kākoʻo ʻia | Kākoʻo ʻia | Kākoʻo ʻia, IE10+ | Kākoʻo ʻia | Kākoʻo ʻia | ʻAʻole i kākoʻo ʻia |
No Firefox, ma waho aʻe o ka hoʻokuʻu kūpaʻa maʻamau hou loa, kākoʻo pū mākou i ka mana Extended Support Release (ESR) hou loa o Firefox.
ʻAʻole pono, pono e nānā a hana maikaʻi ʻo Bootstrap ma Chromium a me Chrome no Linux, Firefox no Linux, a me Internet Explorer 9, ʻoiai ʻaʻole lākou i kākoʻo ʻia.
No ka papa inoa o kekahi o nā lako polokalamu kele pūnaewele a Bootstrap e hakakā ai, e ʻike i kā mākou Wall of browser bugs .
Kākoʻo ʻia ʻo Internet Explorer 10+; ʻAʻole ʻo IE9 a i lalo. E ʻoluʻolu e hoʻomaopopo ʻaʻole kākoʻo piha ʻia kekahi mau waiwai CSS3 a me nā mea HTML5 ma IE10, a i ʻole makemake i nā waiwai prefixed no ka hana piha. E kipa Hiki iaʻu ke hoʻohana… no nā kikoʻī e pili ana i ke kākoʻo polokalamu kele pūnaewele o CSS3 a me nā hiʻohiʻona HTML5.
Inā makemake ʻoe i ke kākoʻo IE8-9, e hoʻohana i ka Bootstrap 3. ʻO ia ka mana paʻa loa o kā mākou code a ke kākoʻo mau ʻia nei e kā mākou hui no nā bugfix koʻikoʻi a me nā loli palapala. Eia naʻe, ʻaʻohe mea hou e hoʻohui ʻia iā ia.
Ua kaupalena ʻia ke kākoʻo no overflow: hidden;ka <body>mea ma IOS a me Android. I kēlā hopena, ke hele ʻoe ma mua o ka luna a i ʻole ka lalo o kahi modal ma kekahi o nā polokalamu kele pūnaewele, <body>e hoʻomaka ana ka ʻike e ʻōwili. E ʻike iā Chrome bug #175502 (paʻa ma Chrome v40) a me WebKit bug #153852 .
E like me ka iOS 9.2, ʻoiai e wehe ʻia ana kahi modal, inā ʻo ka pa mua ʻana o kahi ʻōkuhi ʻōwili i loko o ka palena o kahi kikokikona <input>a i ʻole kahi <textarea>, <body>e ʻōwili ʻia ka ʻike ma lalo o ka modal ma kahi o ka modal ponoʻī. E ʻike i ka hewa WebKit #153856 .
ʻAʻole .dropdown-backdrophoʻohana ʻia ka mea ma iOS ma ka nav no ka paʻakikī o ka z-indexing. No laila, e pani i nā hāʻule i nā navbars, pono ʻoe e kaomi pololei i ka mea hāʻule i lalo (a i ʻole kekahi mea ʻē aʻe e puhi i kahi hanana kaomi ma iOS ).
ʻO ka hoʻonui ʻana i ka ʻaoʻao e hōʻike ana i ka hoʻolilo ʻana i nā mea kiʻi i kekahi mau mea, ma Bootstrap a me ke koena o ka pūnaewele. Ma muli o ka pilikia, hiki iā mākou ke hoʻoponopono (e huli mua a wehe i kahi pilikia inā pono). Eia nō naʻe, maʻa mākou e haʻalele i kēia mau mea no ka mea ʻaʻohe o lākou hopena pololei ma mua o nā workarounds hacky.
ʻOiai :hoverʻaʻole hiki i ka hapa nui o nā mea hoʻopā, hoʻolike ʻo IOS i kēia ʻano, e hopena i nā ʻano hover "sticky" e hoʻomau ma hope o ke kaomi ʻana i hoʻokahi mea. Hoʻopau wale ʻia kēia mau ʻano hover ke paʻi nā mea hoʻohana i kekahi mea ʻē aʻe. Manaʻo ʻia kēia ʻano he mea makemake ʻole a ʻike ʻia ʻaʻole ia he pilikia ma nā polokalamu Android a i ʻole Windows.
I loko o kā mākou v4 alpha a me ka hoʻokuʻu beta, ua hoʻokomo mākou i nā code i hoʻopiha ʻole ʻia a ʻōlelo ʻia no ke koho ʻana i kahi shim hulina media e hoʻopau i nā ʻano hover i nā polokalamu kelepona paʻi e hoʻohālike i ka hover. ʻAʻole i hoʻopau piha ʻia kēia hana, akā no ka pale ʻana i ka haki ʻana, ua koho mākou e hoʻopau i kēia shim a mālama i nā mixins ma ke ʻano he pōkole no nā papa pseudo.
ʻOiai ma kekahi mau polokalamu kele hou, hiki ke paʻi ʻia.
Ma ka Safari v8.0, hiki i ka hoʻohana ʻana i ka papa paʻa-ākea .containerke hoʻohana ʻo Safari i ka liʻiliʻi liʻiliʻi liʻiliʻi ke paʻi ʻana. E nānā i ka pukana #14868 a me WebKit bug #138192 no nā kikoʻī hou aku. ʻO kahi hoʻoponopono kūpono ʻo CSS kēia:
@media print {
.container {
width: auto;
}
}Ma waho o ka pahu, hoʻouna ʻia ka Android 4.1 (a me kekahi mau mea hou aʻe) me ka polokalamu Browser ma ke ʻano he polokalamu kele pūnaewele paʻamau (e kū'ē iā Chrome). ʻO ka mea pōʻino, ʻo ka polokalamu kele pūnaewele he nui nā pōpoki a me nā ʻano like ʻole me CSS ma ka laulā.
Ma <select>nā mea, ʻaʻole e hōʻike ka polokalamu kelepona Android i nā mana ʻaoʻao inā loaʻa kahi border-radiusa/a borderi hoʻohana ʻia. (E nānā i kēia nīnau StackOverflow no nā kikoʻī.) E hoʻohana i ka snippet o ke code ma lalo nei no ka wehe ʻana i ka CSS hewa a hoʻolilo iā ia <select>ma ke ʻano he ʻano ʻole ma ka polokalamu kele pūnaewele Android. ʻAʻole ka mea hoʻohana e honi ana i ke keakea ʻana i nā polokalamu kele pūnaewele Chrome, Safari, a 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>Makemake ʻoe e ʻike i kahi laʻana? E nānā i kēia JS Bin demo.
No ka hāʻawi ʻana i ka ʻike maikaʻi loa i nā polokalamu kele kahiko a me ka buggy, hoʻohana ʻo Bootstrap i nā hack browser CSS ma nā wahi he nui e hoʻopaʻa i ka CSS kūikawā i kekahi mau polokalamu kele pūnaewele i mea e hana ai i nā pōpoki i loko o nā polokalamu kele pūnaewele ponoʻī. Hoʻomaopopo kēia mau hacks i ka hoʻopiʻi ʻana o nā mea hōʻoia CSS no ka hewa ʻole. Ma nā wahi ʻelua, hoʻohana pū mākou i nā hiʻohiʻona CSS bleeding-edge ʻaʻole i hoʻohālikelike piha ʻia, akā hoʻohana wale ʻia kēia mau mea no ka holomua holomua.
ʻAʻole pili kēia mau ʻōlelo hōʻoia i ka hoʻomaʻamaʻa ʻana no ka mea ua hōʻoia piha ka ʻāpana non-hacky o kā mākou CSS a ʻaʻole keʻakeʻa nā ʻāpana hacky i ka hana kūpono o ka ʻāpana non-hacky, no laila ke noʻonoʻo nei mākou i kēia mau ʻōlelo aʻo.
Loaʻa i kā mākou mau palapala HTML kekahi mau ʻōlelo hōʻoia HTML koʻikoʻi ma muli o kā mākou hoʻokomo ʻana i kahi hoʻoponopono no kekahi bug Firefox .