Browserwo kple mɔ̃wo
Srɔ̃ nu tso web-browser kple mɔ̃wo, tso egbegbe dzi va ɖo xoxo dzi, siwo Bootstrap doa alɔ ŋu, siwo dometɔ aɖewoe nye quirks kple bugs siwo wonya na wo dometɔ ɖesiaɖe.
Bootstrap doa alɔ web-browser kple mɔ̃ gãwo katã ƒe tata yeyetɔ siwo li ke . Le Windows dzi la, míedoa alɔ Internet Explorer 10-11 / Microsoft Edge .
Womedoa alɔ web-browser bubu siwo zãa WebKit, Blink, alo Gecko ƒe tata yeyetɔ, eɖanye tẽ alo to mɔ̃a ƒe web view API dzi tẽ o. Gake ele be Bootstrap (le go geɖe me) naɖee afia eye wòawɔ dɔ nyuie le web-browser siawo hã me. Wona kpekpeɖeŋunyatakaka siwo me kɔ wu le ete.
Àte ŋu akpɔ míaƒe web-browser siwo míedoa alɔ kple woƒe tɔtrɔwo le míaƒepackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Míezãa Autoprefixer tsɔ kpɔa web-browser ƒe kpekpeɖeŋu si míeɖo be míawɔ gbɔ to CSS ƒe ŋgɔdonyawo dzi, si zãa Browserslist tsɔ kpɔa web-browser ƒe tɔtrɔ siawo dzi. Kpɔ woƒe nuŋlɔɖiwo me hena alesi nàwɔ atsɔ dɔwɔnu siawo ade wò dɔwo me.
Le goawo katã me la, Bootstrap doa alɔ mɔ̃ gã ɖesiaɖe ƒe web-browser gbãtɔwo ƒe tata yeyewo. De dzesii be womewɔa dɔ le proxy browserwo (abe Opera Mini, Opera Mobile ƒe Turbo mode, UC Browser Mini, Amazon Silk ene) ŋu o.
| Chrome | Firefox ƒe ƒuƒoƒo | Safari ƒe ƒuƒoƒo | Android ƒe Nyatakakadzraɖoƒe & Nyatakakadzraɖoƒe ƒe Nɔnɔme | Microsoft ƒe Edge | |
|---|---|---|---|---|---|
| Android dzi | Wodo alɔe | Wodo alɔe | N/A | Android v5.0+ ƒe kpekpeɖeŋu | Wodo alɔe |
| iOS ƒe nyatakakawo | Wodo alɔe | Wodo alɔe | Wodo alɔe | N/A | Wodo alɔe |
| Windows 10 Asitelefon dzi | N/A | N/A | N/A | N/A | Wodo alɔe |
Nenema ke wodoa alɔ kɔmpiutadziɖoɖowo ƒe akpa gãtɔ ƒe tata yeyetɔwo hã.
| Chrome | Firefox ƒe ƒuƒoƒo | Internet dzi Nyatakakadzraɖoƒe | Microsoft ƒe Edge | Opera ƒe fefewɔƒe | Safari ƒe ƒuƒoƒo | |
|---|---|---|---|---|---|---|
| Mac | Wodo alɔe | Wodo alɔe | N/A | N/A | Wodo alɔe | Wodo alɔe |
| Fesrewo ƒe fesrewo | Wodo alɔe | Wodo alɔe | Wodo alɔe, IE10+ | Wodo alɔe | Wodo alɔe | Womedo alɔe o |
Le Firefox gome la, tsɔ kpe ɖe normal stable release yeyetɔ ŋu la, míedoa alɔ Firefox ƒe Extended Support Release (ESR) ƒe tata yeyetɔ hã.
Le mɔ si mele se nu o nu la, ele be Bootstrap nadze nyuie eye wòawɔ nu nyuie le Chromium kple Chrome na Linux, Firefox na Linux, kple Internet Explorer 9 me, togbɔ be womeda asi ɖe wo dzi le se nu o hã.
Ne èdi web-browser ƒe vodada aɖewo siwo wòle be Bootstrap nawɔ avu kplii la, kpɔ míaƒe Gli si ku ɖe browser ƒe vodadawo ŋu .
Wodoa alɔ Internet Explorer 10+; IE9 kple anyime menye nenema o. Taflatse nyae be CSS3 ƒe nɔnɔme aɖewo kple HTML5 ƒe akpa aɖewo medo alɔ bliboe le IE10 me o, alo hiã nɔnɔme siwo do ŋgɔ na dɔwɔwɔ hena dɔwɔwɔ bliboe. Yi Ðe mate ŋu azãe... hena numeɖeɖe tsitotsito tso browser ƒe kpekpeɖeŋunana CSS3 kple HTML5 ƒe nɔnɔmewo ŋu.
Ne èhiã IE8-9 ƒe kpekpeɖeŋu la, zã Bootstrap 3. Enye míaƒe kɔda ƒe tɔtrɔ si li ke wu eye míaƒe ƒuƒoƒoa gakpɔtɔ le megbe na vodada veviwo ɖɔɖɔɖo kple nuŋlɔɖiwo ƒe tɔtrɔwo. Gake womatsɔ nu yeye aɖeke akpe ɖe eŋu o.
Kpekpeɖeŋu na overflow: hidden;le <body>element la dzi se ɖe afi aɖe ŋutɔ le iOS kple Android me. Be nàte ŋu awɔ esia la, ne èʋu modal aɖe ƒe tame alo ete le mɔ̃ mawo ƒe web-browserwo dometɔ aɖe me la, <body>emenyawo adze ʋuʋu gɔme. Kpɔ Chrome ƒe vodada #175502 (woɖɔe ɖo le Chrome v40 me) kple WebKit ƒe vodada #153852 .
<input>Tso iOS 9.2 dzi la, esime modal aɖe le ʋuʋu ɖi la, ne agbalẽxatsaxatsa ƒe dzesi ƒe asikaka gbãtɔ le nuŋɔŋlɔ alo a ƒe liƒo me la, woaʋu <textarea>nya <body>siwo le modal la te ɖe modal la ŋutɔ teƒe. Kpɔ WebKit ƒe vodada #153856 .
Womezãa .dropdown-backdropelement la le iOS le nav me o le z-indexing ƒe sesẽ ta. Eyata, be nàtu nusiwo le navbars me la, ele be nàzi nusiwo le tsia dzi la dzi tẽ (alo nu bubu ɖesiaɖe si atɔ dzo nudzɔdzɔ si le iOS me ).
Axa ƒe lolome dzi ɖeɖe kpɔtɔ ɖea gɔmeɖeɖe ƒe asinudɔwɔwɔwo fiana godoo le akpa aɖewo me, le Bootstrap kple nyatakakadzraɖoƒea ƒe akpa mamlɛa siaa me. Le nyaa nu la, míate ŋu aɖɔe ɖo (di gbã eye emegbe nàʋu nya aɖe ne ehiã). Ke hã, míedina be míaŋe aɖaba aƒu esiawo dzi elabena zi geɖe la, egbɔkpɔnu aɖeke mele wo si tẽ o negbe hacky workarounds ko.
Togbɔ :hoverbe manya wɔ le asikaka mɔ̃ akpa gãtɔ dzi o hã la, iOS srɔ̃a nuwɔna sia, si wɔnɛ be wowɔa hover ƒe atsyã siwo “léna ɖe nu ŋu” siwo nɔa anyi ɖaa le nu ɖeka ƒoƒo vɔ megbe. Ne ezãlawo ƒo nu bubu aɖe ko hafi woɖea hover ƒe atsyã siawo ɖa. Wobua nuwɔna sia be eƒe akpa gãtɔ medze o eye edze abe menye nya aɖeke le Android alo Windows dɔwɔnuwo dzi o ene.
Le míaƒe v4 alpha kple beta ƒe tatawo katã me la, míetsɔ kɔda siwo mede blibo o kple esiwo ŋu woƒo nu tsoe la de eme hena tiatiawɔwɔ ɖe media biabia shim si ana hover ƒe atsyãwo nawɔ dɔ le touch device browser siwo srɔ̃a hovering me. Womewu dɔ sia nu bliboe alo wɔe kpɔ o, gake be míaƒo asa na eƒe gbagbã keŋkeŋ la, míetiae be míaɖe asi le shim sia ŋu eye míana mixins la nanye mɔ kpuiwo na pseudo-klaswo.
Le egbegbe web-browser aɖewo gɔ̃ hã me la, agbalẽtata ate ŋu anye nusi me susu mele o.
Tso Safari v8.0 dzi la, fixed-width .containerclass zazã ateŋu ana Safari nazã ŋɔŋlɔdzesi sue aɖe si mebɔ o ne ele agbalẽ tam. Kpɔ tata #14868 kple WebKit ƒe vodada #138192 hena numeɖeɖe bubuwo. Mɔnu ɖeka si woate ŋu azãe nye CSS si gbɔna:
@media print {
.container {
width: auto;
}
}Le aɖaka la me la, Android 4.1 (kple edze abe nu yeye aɖewo gɔ̃ hã siwo woɖe ɖe go ene) ɖoa wo ɖe Browser dɔwɔnua abe nyatakakadzraɖoƒe si nètia ene (si to vovo na Chrome). Nublanuitɔe la, vodada geɖe le Browser app la ŋu eye mewɔ ɖeka kple CSS le goawo katã me o.
Le <select>elements dzi la, Android stock browser la maɖe axadzidziɖuɖuwo afia nenye be a aɖe li border-radiuseye/alo borderwozãe. (Kpɔ StackOverflow biabia sia hena numeɖeɖe bubuwo.) Zã kɔda ƒe akpa aɖe si le ete nàtsɔ aɖe CSS si do dziku la ɖa eye nàɖee afia <select>abe nusi womewɔ atsyã na o ene le Android stock browser la dzi. Zãla ƒe dɔwɔƒea ƒe ʋeʋẽ lilili ƒoa asa na Chrome, Safari, kple Mozilla ƒe nyatakakadzraɖoƒewo ƒe nudede eme.
<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>Àdi be yeakpɔ kpɔɖeŋu aɖea? Kpɔ JS Bin ƒe wɔwɔfia sia ɖa.
Be woakpɔ nuteƒekpɔkpɔ nyuitɔ kekeake na web-browser xoxowo kple esiwo me vodada le la, Bootstrap zãa CSS browser hacks le teƒe geɖe tsɔ ɖoa taɖodzinu na CSS tɔxɛwo ɖe web-browser ƒe tɔtrɔ aɖewo ŋu be woate ŋu awɔ dɔ tso vodada siwo le web-browserawo ŋutɔ me ŋu. Gɔmesese le eŋu be hack siawo nana CSS validators toa nyatoƒoe be yewomele eteƒe o. Le teƒe eve aɖewo la, míezãa Bleeding-edge CSS features siwo womeɖo ɖe ɖoɖo nu bliboe haɖe o hã, gake wozãa esiawo hena ŋgɔyiyi vivivi ɖeɖeko.
Nuxlɔ̃ame siawo siwo wotsɔ ɖo kpe edzi la mehiã le nuwɔna me o elabena míaƒe CSS ƒe akpa si menye hacky o la ɖoa kpe edzi bliboe eye akpa siwo nye hacky la medoa kplamatse akpa si menye hacky o ƒe dɔwɔwɔ nyuie o, eyatae míeɖonɛ koŋ ŋea aɖaba ƒua nuxlɔ̃ame siawo koŋ dzi ɖo.
Míaƒe HTML nuŋlɔɖiwo hã le HTML ƒe kpeɖodzi ƒe nuxlɔ̃ame aɖewo siwo mele vevie o eye womehiã o la le esi míetsɔ Firefox ƒe vodada aɖe gbɔ kpɔnu aɖe de eme ta .