Vivinjari na vifaa
Jifunze kuhusu vivinjari na vifaa, vya kisasa hadi vya zamani, ambavyo vinatumika na Bootstrap, ikijumuisha makosa na hitilafu zinazojulikana kwa kila moja.
Vivinjari vinavyotumika
Bootstrap inasaidia matoleo ya hivi punde na thabiti ya vivinjari na majukwaa yote makuu. Kwenye Windows, tunaauni Internet Explorer 10-11 / Microsoft Edge .
Vivinjari mbadala vinavyotumia toleo jipya zaidi la WebKit, Blink, au Gecko, iwe moja kwa moja au kupitia API ya mwonekano wa wavuti ya jukwaa, havitumiki kwa uwazi. Walakini, Bootstrap inapaswa (katika hali nyingi) kuonyesha na kufanya kazi ipasavyo katika vivinjari hivi pia. Taarifa maalum zaidi za usaidizi zimetolewa hapa chini.
Unaweza kupata anuwai ya vivinjari vinavyotumika na matoleo yao katika.browserslistrc file :
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
Tunatumia Autoprefixer kushughulikia usaidizi uliokusudiwa wa kivinjari kupitia viambishi awali vya CSS, ambayo hutumia Orodha ya Kivinjari kudhibiti matoleo haya ya kivinjari. Angalia hati zao za jinsi ya kuunganisha zana hizi kwenye miradi yako.
Vifaa vya rununu
Kwa ujumla, Bootstrap inasaidia matoleo mapya zaidi ya kila vivinjari chaguo-msingi vya jukwaa kuu. Kumbuka kuwa vivinjari vya seva mbadala (kama vile Opera Mini, hali ya Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) havitumiki.
| Chrome | Firefox | Safari | Kivinjari cha Android na Mwonekano wa Wavuti | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Imeungwa mkono | Imeungwa mkono | N/A | Android v5.0+ inatumika | Imeungwa mkono |
| iOS | Imeungwa mkono | Imeungwa mkono | Imeungwa mkono | N/A | Imeungwa mkono |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Imeungwa mkono |
Vivinjari vya eneo-kazi
Vile vile, matoleo ya hivi karibuni ya vivinjari vingi vya eneo-kazi yanaauniwa.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Imeungwa mkono | Imeungwa mkono | N/A | N/A | Imeungwa mkono | Imeungwa mkono |
| Windows | Imeungwa mkono | Imeungwa mkono | Inatumika, IE10+ | Imeungwa mkono | Imeungwa mkono | Haitumiki |
Kwa Firefox, pamoja na toleo la hivi punde thabiti la kawaida, pia tunaauni toleo la hivi punde la Utoaji wa Usaidizi Uliopanuliwa (ESR) wa Firefox.
Isivyo rasmi, Bootstrap inapaswa kuonekana na kutenda vyema katika Chromium na Chrome kwa Linux, Firefox kwa Linux, na Internet Explorer 9, ingawa hazitumiki rasmi.
Kwa orodha ya baadhi ya hitilafu za kivinjari ambazo Bootstrap inapaswa kukabiliana nazo, angalia Wall of browser bugs zetu .
Internet Explorer
Internet Explorer 10+ inatumika; IE9 na chini sio. Tafadhali fahamu kuwa baadhi ya vipengele vya CSS3 na vipengele vya HTML5 havitumiki kikamilifu katika IE10, au vinahitaji sifa zilizoangaziwa kwa utendakazi kamili. Tembelea Je, ninaweza kutumia... kwa maelezo kuhusu usaidizi wa kivinjari wa vipengele vya CSS3 na HTML5. Ikiwa unahitaji usaidizi wa IE8-9, tumia Bootstrap 3.
Modals na dropdowns kwenye simu
Kufurika na kusogeza
Usaidizi kwa overflow: hidden;kipengele <body>ni mdogo katika iOS na Android. Kwa ajili hiyo, unaposogeza juu au chini ya modali katika mojawapo ya vivinjari vya vifaa hivyo, <body>maudhui yataanza kusogeza. Tazama hitilafu ya Chrome #175502 (iliyorekebishwa katika Chrome v40) na mdudu wa WebKit #153852 .
Sehemu za maandishi za iOS na kusogeza
Kuanzia iOS 9.2, wakati modali imefunguliwa, ikiwa mguso wa kwanza wa ishara ya kusogeza uko ndani ya mpaka wa maandishi <input>au a <textarea>, <body>maudhui yaliyo chini ya modali yatasonga badala ya modali yenyewe. Tazama hitilafu ya WebKit #153856 .
Miteremko ya Upau wa Urambazaji
Kipengele .dropdown-backdrophiki hakitumiki kwenye iOS kwenye nav kwa sababu ya uchangamano wa z-index. Kwa hivyo, ili kufunga menyu kunjuzi kwenye pau za urambazaji, lazima ubofye moja kwa moja kipengee kunjuzi (au kipengele kingine chochote kitakachowasha tukio la kubofya katika iOS ).
Kukuza kwa kivinjari
Ukuzaji wa ukurasa bila shaka huwasilisha uwasilishaji wa vizalia vya programu katika baadhi ya vipengele, katika Bootstrap na kwingineko kwenye wavuti. Kulingana na tatizo, tunaweza kulitatua (tafuta kwanza kisha ufungue tatizo ikihitajika). Walakini, huwa tunapuuza haya kwani mara nyingi hayana suluhisho la moja kwa moja isipokuwa njia za kudanganya.
Inanata :hover/ :focuskwenye iOS
Ingawa :hoverhaiwezekani kwenye vifaa vingi vya kugusa, iOS huiga tabia hii, na kusababisha mitindo ya "nata" ya kuelea ambayo huendelea baada ya kugonga kipengele kimoja. Mitindo hii ya kuelea huondolewa tu wakati watumiaji wanagonga kipengele kingine. Tabia hii inachukuliwa kuwa isiyofaa na inaonekana kuwa si suala kwenye vifaa vya Android au Windows.
Katika matoleo yetu yote ya v4 ya alpha na beta, tulijumuisha msimbo ambao haujakamilika na tulitoa maoni kwa ajili ya kujijumuisha katika hoja ya media ambayo itazima mitindo ya kuelea kwenye vivinjari vya kifaa cha kugusa ambavyo vinaiga kuelea. Kazi hii haikukamilishwa kabisa au kuwashwa, lakini ili kuepuka kuvunjika kabisa, tumechagua kuacha kutumia shim hii na kuweka michanganyiko kama njia za mkato za aina bandia.
Uchapishaji
Hata katika vivinjari vingine vya kisasa, uchapishaji unaweza kuwa wa kushangaza.
Kufikia Safari v8.0, utumiaji wa darasa la upana usiobadilika .containerunaweza kusababisha Safari kutumia saizi ndogo ya fonti wakati wa kuchapisha. Tazama toleo #14868 na mdudu wa WebKit #138192 kwa maelezo zaidi. Njia moja inayowezekana ya kufanya kazi ni CSS ifuatayo:
@media print {
.container {
width: auto;
}
}Kivinjari cha hisa cha Android
Nje ya kisanduku, Android 4.1 (na hata matoleo mapya zaidi inaonekana) husafirishwa na programu ya Kivinjari kama kivinjari chaguo-msingi cha chaguo-msingi (kinyume na Chrome). Kwa bahati mbaya, programu ya Kivinjari ina hitilafu nyingi na kutopatana na CSS kwa ujumla.
Chagua menyu
Kwenye <select>vipengele, kivinjari cha hisa cha Android hakitaonyesha vidhibiti vya kando ikiwa kuna border-radiusna/au borderkutumika. (Angalia swali hili la StackOverflow kwa maelezo.) Tumia kijisehemu cha msimbo ulio hapa chini ili kuondoa CSS inayokera na kutoa <select>kama kipengele kisicho na mtindo kwenye kivinjari cha hisa cha Android. Wakala wa mtumiaji anayenusa huepuka kuingiliwa na vivinjari vya Chrome, Safari na 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>Unataka kuona mfano? Angalia onyesho hili la JS Bin .
Vithibitishaji
Ili kutoa utumiaji bora zaidi kwa vivinjari vya zamani na vilivyo na hitilafu, Bootstrap hutumia udukuzi wa kivinjari cha CSS katika maeneo kadhaa ili kulenga CSS maalum kwa matoleo fulani ya kivinjari ili kushughulikia hitilafu kwenye vivinjari vyenyewe. Udukuzi huu kwa kueleweka husababisha wathibitishaji wa CSS kulalamika kuwa si sahihi. Katika maeneo kadhaa, pia tunatumia vipengele vya CSS ambavyo havijasawazishwa kikamilifu, lakini vinatumika kwa ajili ya uboreshaji unaoendelea.
Maonyo haya ya uthibitishaji hayajalishi kiutendaji kwani sehemu isiyo ya udukuzi ya CSS yetu haidhibitishi kikamilifu na sehemu za udukuzi haziingiliani na utendakazi sahihi wa sehemu isiyo ya udukuzi, kwa hivyo tunapuuza maonyo haya kimakusudi.
Hati zetu za HTML vile vile zina maonyo madogo na yasiyo na maana ya uthibitishaji wa HTML kwa sababu ya ujumuishaji wetu wa suluhisho kwa hitilafu fulani ya Firefox .