Browser sy fitaovana
Mianara momba ny navigateur sy fitaovana, manomboka amin'ny maoderina ka hatramin'ny taloha, izay tohanan'ny Bootstrap, ao anatin'izany ireo quirks sy bibikely fantatra ho an'ny tsirairay.
Bootstrap dia manohana ny famoahana farany sy maharitra amin'ny navigateur sy sehatra lehibe rehetra. Amin'ny Windows, manohana Internet Explorer 10-11 / Microsoft Edge izahay .
Ny navigateur hafa izay mampiasa ny kinova farany an'ny WebKit, Blink, na Gecko, na mivantana na amin'ny alàlan'ny API fijerena tranonkala an'ny sehatra, dia tsy tohanana mazava. Na izany aza, ny Bootstrap dia tokony (amin'ny ankamaroan'ny tranga) hiseho sy hiasa tsara amin'ireo navigateur ireo ihany koa. Misy fampahalalana fanampiny momba ny fanohanana omena eto ambany.
Azonao atao ny mahita ny karazana navigateur tohananay sy ny dikan'izy ireo ao amin'nypackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Mampiasa Autoprefixer izahay mba hikarakarana ny fanohanan'ny navigateur amin'ny alàlan'ny prefix CSS, izay mampiasa Browserslist hitantana ireo dikan-tranonkala ireo. Jereo ny antontan-taratasin'izy ireo momba ny fomba hampidirana ireo fitaovana ireo amin'ny tetikasanao.
Amin'ny ankapobeny, ny Bootstrap dia manohana ny dikan-teny farany amin'ny navigateur default amin'ny sehatra lehibe tsirairay. Mariho fa ny mpitety proxy (toy ny Opera Mini, ny maody Turbo an'ny Opera Mobile, ny UC Browser Mini, ny Amazon Silk) dia tsy tohana.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Nanohana | Nanohana | N / A | Android v5.0+ tohana | Nanohana |
| iOS | Nanohana | Nanohana | Nanohana | N / A | Nanohana |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Nanohana |
Toy izany koa, ny kinova farany indrindra amin'ny ankamaroan'ny navigateur desktop dia tohana.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | opéra | Safari | |
|---|---|---|---|---|---|---|
| Mac | Nanohana | Nanohana | N / A | N / A | Nanohana | Nanohana |
| am-baravarankely | Nanohana | Nanohana | Tohanana, IE10+ | Nanohana | Nanohana | Tsy zaka |
Ho an'ny Firefox, ankoatry ny famoahana stable mahazatra farany, dia manohana ny dikan-teny farany amin'ny Extended Support Release (ESR) an'ny Firefox ihany koa izahay.
Tsy ofisialy, Bootstrap dia tokony hijery sy hitondra tena tsara ao amin'ny Chromium sy Chrome ho an'ny Linux, Firefox ho an'ny Linux ary Internet Explorer 9, na dia tsy tohanana amin'ny fomba ofisialy aza izy ireo.
Raha mila lisitr'ireo otrikaretina sasany tsy maintsy atrehin'i Bootstrap dia jereo ny Rindrin'ny bibikely navigateur .
Internet Explorer 10+ dia tohana; IE9 sy ny ambany dia tsy. Azafady, fantaro fa ny fananana CSS3 sy ny singa HTML5 sasany dia tsy tohanana tanteraka ao amin'ny IE10, na mila fananana efa misy mialoha ho an'ny fiasa feno. Tsidiho ny Azoko ampiasaina… raha mila antsipiriany momba ny fanohanan'ny navigateur ny endri-javatra CSS3 sy HTML5.
Raha mila fanohanana IE8-9 ianao dia ampiasao ny Bootstrap 3. Izy io no dikan-teny marin-toerana indrindra amin'ny kaody ary mbola tohanan'ny ekipanay amin'ny fanamboarana bug mitsikera sy fanovana antontan-taratasy. Na izany aza, tsy misy endri-javatra vaovao hampiana azy.
Ny fanohanana overflow: hidden;amin'ny <body>singa dia voafetra ihany amin'ny iOS sy Android. Mba hanaovana izany, rehefa mihodinkodina eo amin'ny farany ambony na ambany amin'ny mody iray amin'ny iray amin'ireo mpitety ireo fitaovana ireo ianao, <body>dia hanomboka hihodina ny atiny. Jereo Chrome bug #175502 (amboarina ao amin'ny Chrome v40) sy WebKit bug #153852 .
Amin'ny iOS 9.2, raha misokatra ny modal iray, raha toa ka ao anatin'ny sisin-tanin'ny soratra <input>na a <textarea>, ny <body>votoaty eo ambanin'ny modal dia hokodina fa tsy ny modal mihitsy. Jereo ny WebKit bug #153856 .
Ny .dropdown-backdropsinga dia tsy ampiasaina amin'ny iOS ao amin'ny nav noho ny fahasarotan'ny z-indexing. Noho izany, mba hanakatona ny dropdowns amin'ny navbars, dia tsy maintsy manindry mivantana ny singa dropdown ianao (na singa hafa izay handrehitra hetsika kitiho ao amin'ny iOS ).
Tsy azo ihodivirana ny fanelanelanana pejy mampiseho artifact amin'ny singa sasany, na ao amin'ny Bootstrap na ao amin'ny tranonkala hafa. Miankina amin'ny olana dia mety ho vitantsika ny manamboatra azy (mitadiava aloha ary manokatra olana raha ilaina). Na izany aza, mazàna tsy miraharaha ireo isika satria matetika izy ireo dia tsy manana vahaolana mivantana afa-tsy ny hacky workarounds.
Na :hoverdia tsy azo atao amin'ny ankamaroan'ny fitaovana fikasihana aza, ny iOS dia maka tahaka an'io fihetsika io, ka miteraka fomba fiasa "miraikitra" izay mitohy aorian'ny fipihana singa iray. Esorina ireo fomba fanendry ireo rehefa manindry singa hafa ireo mpampiasa. Ity fihetsika ity dia heverina ho tsy ilaina ary toa tsy olana amin'ny fitaovana Android na Windows.
Nandritra ny famoahana ny v4 alpha sy beta, dia nampidirinay ny kaody tsy feno sy naneho hevitra momba ny firotsahana amin'ny fangatahan'ny haino aman-jery izay hanaisotra ny fomba fihetsehana amin'ny navigateur fitaovana mikasika izay maka tahaka ny mikisaka. Ity asa ity dia tsy vita tanteraka na navela na oviana na oviana, fa mba hisorohana ny fahapotehana tanteraka, dia nisafidy ny hanala an'io shim io izahay ary hitazona ny mixins ho hitsin-dàlana ho an'ny kilasy pseudo.
Na dia amin'ny navigateur maoderina sasany aza, ny fanontana dia mety ho hafahafa.
Amin'ny Safari v8.0, ny fampiasana ny .containerkilasin'ny sakan'ny raikitra dia mety hahatonga an'i Safari hampiasa habe kely tsy mahazatra rehefa manonta. Jereo ny olana #14868 sy WebKit bug #138192 raha mila fanazavana fanampiny. Ny vahaolana iray mety hitranga dia ity CSS manaraka ity:
@media print {
.container {
width: auto;
}
}Eo ivelan'ny boaty, ny Android 4.1 (ary na dia ny famoahana vaovao sasany aza) dia alefa miaraka amin'ny app Browser ho navigateur tranonkala safidy (mifanohitra amin'ny Chrome). Indrisy anefa fa ny app Browser dia manana bug sy tsy mifanaraka amin'ny CSS amin'ny ankapobeny.
Amin'ny <select>singa, ny navigateur stock Android dia tsy hampiseho ny fanaraha-maso amin'ny lafiny raha misy border-radiussy/na borderampiharina. (Jereo ity fanontaniana StackOverflow ity ho an'ny antsipiriany.) Ampiasao ny sombin-kaody etsy ambany hanesorana ny CSS manafintohina ary <select>adika ho singa tsy misy endrika amin'ny navigateur stock Android. Misoroka ny fitsabahana amin'ny navigateur Chrome, Safari, ary Mozilla ny mpampiasa mpampiasa sniffing.
<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>Te hahita ohatra? Jereo ity demo JS Bin ity.
Mba hanomezana traikefa tsara indrindra ho an'ny mpitety tranonkala taloha sy buggy, Bootstrap dia mampiasa hacks amin'ny navigateur CSS amin'ny toerana maromaro mba hikendry CSS manokana amin'ny dikan-tranonkala sasany mba hamahana ireo bibikely ao amin'ny navigateur. Ireo hacks ireo dia azo antoka fa mahatonga ny validators CSS hitaraina fa tsy manan-kery. Any amin'ny toerana roa dia mampiasa endri-javatra CSS bleeding-edge ihany koa izahay izay mbola tsy manara-penitra tanteraka, fa ireo dia ampiasaina ho fanatsarana miandalana.
Ireo fampitandremana fanamarinana ireo dia tsy misy dikany amin'ny fampiharana satria ny ampahany tsy hacky amin'ny CSS-ntsika dia manamarina tanteraka ary ny ampahany hacky dia tsy manelingelina ny fampandehanana araka ny tokony ho izy ny ampahany tsy mijirika, noho izany antony izany dia tsy miraharaha ireo fampitandremana manokana ireo isika.
Ny antontan-taratasy HTML anay koa dia manana fampitandremana fanamafisana HTML tsy misy dikany sy tsy misy dikany noho ny fampidiranay vahaolana ho an'ny bug Firefox iray .