Source

Arakatzaileak eta gailuak

Ikasi Bootstrap-ek onartzen dituen arakatzaile eta gailuei buruz, modernoetatik zaharrera, bakoitzaren bitxikeria eta akats ezagunak barne.

Onartutako arakatzaileak

Bootstrap-ek arakatzaile eta plataforma nagusi guztien azken bertsio egonkorrak onartzen ditu. Windows-en, Internet Explorer 10-11 / Microsoft Edge onartzen dugu .

WebKit, Blink edo Gecko-ren azken bertsioa erabiltzen duten arakatzaile alternatiboak, zuzenean edo plataformaren web ikuspegiaren APIaren bidez, ez dira esplizituki onartzen. Hala ere, Bootstrap-ek (kasu gehienetan) behar bezala erakutsi eta funtzionatu beharko luke arakatzaile hauetan ere. Laguntza-informazio zehatzagoa behean ematen da.

Gailu mugikorrak

Oro har, Bootstrap-ek plataforma nagusi bakoitzaren arakatzaile lehenetsien azken bertsioak onartzen ditu. Kontuan izan proxy arakatzaileak (adibidez, Opera Mini, Opera Mobile-ren Turbo modua, UC Browser Mini, Amazon Silk) ez direla onartzen.

Chrome Firefox Safaria Android arakatzailea eta WebView Microsoft Edge
Android Onartua Onartua N/A Android v5.0+ onartzen da Onartua
iOS Onartua Onartua Onartua N/A Onartua
Windows 10 Mugikorra N/A N/A N/A N/A Onartua

Mahaigaineko arakatzaileak

Era berean, mahaigaineko arakatzaile gehienen azken bertsioak onartzen dira.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safaria
Mac Onartua Onartua N/A N/A Onartua Onartua
Leihoak Onartua Onartua Onartua, IE10+ Onartua Onartua Ez da onartzen

Firefox-erako, azken bertsio egonkor arruntaz gain, Firefox-en azken laguntza hedatua (ESR) bertsioa ere onartzen dugu.

Ez-ofizialki, Bootstrap-ek nahikoa itxura eta portaera izan beharko luke Chromium eta Chrome Linux-en, Firefox Linux-en eta Internet Explorer 9-n, ofizialki onartzen ez diren arren.

Bootstrap-ek aurre egin behar dion arakatzailearen akatsen zerrenda ikusteko, ikus gure arakatzailearen akatsen horma .

Internet Explorer

Internet Explorer 10+ onartzen da; IE9 eta behera ez da. Kontuan izan CSS3 propietate eta HTML5 elementu batzuk ez direla guztiz onartzen IE10-n, edo funtzionalitate osoa lortzeko aurrizkizko propietateak behar dituztela. Bisitatu Can I use… CSS3 eta HTML5 funtzioen arakatzailearen laguntzari buruzko xehetasunak lortzeko.

IE8-9 laguntza behar baduzu, erabili Bootstrap 3. Gure kodearen bertsio egonkorrena da eta gure taldeak onartzen du akatsen konponketa eta dokumentazio aldaketa kritikoetarako. Hala ere, ez zaio ezaugarri berririk gehituko.

Modalak eta goitibeherakoak mugikorrean

Gainezka eta korritzea

Elementurako laguntza nahiko mugatua da iOS eta Android-en overflow: hidden;. <body>Horretarako, gailu horietako edozein arakatzaileetan modal baten goiko edo behealdetik mugitzen zarenean, <body>edukia korritzen hasiko da. Ikusi Chrome akatsa #175502 (Chrome v40-n konponduta) eta WebKit akatsa #153852 .

iOS testu-eremuak eta desplazamendua

iOS 9.2-tik aurrera, modal bat irekita dagoen bitartean, korritze-keinu baten hasierako ukitua testu baten <input>edo baten mugaren barruan badago <textarea>, <body>modalaren azpian dagoen edukia korrituko da modalaren ordez. Ikusi WebKit akatsa #153856 .

Elementua .dropdown-backdropez da iOS-n erabiltzen nabigazioan, z-indexazioaren konplexutasuna dela eta. Horrela, nabigazio-barren goitibeherako zerrendak ixteko, zuzenean egin behar duzu klik goitibeherako elementuan (edo iOS-en klik-gertaera bat piztuko duen beste edozein elementu ).

Arakatzailea zooma

Orriaren zoomak ezinbestean errendatze-artefaktuak aurkezten ditu osagai batzuetan, bai Bootstrap-en, bai gainerako sarean. Arazoaren arabera, konpondu ahal izango dugu (lehenik bilatu eta gero arazo bat ireki behar izanez gero). Hala ere, hauek alde batera utzi ohi ditugu, askotan ez baitute soluzio zuzenik hackearen konponbideez gain.

Sticky :hover/ :focusiOS-n

Ukipeneko :hovergailu gehienetan posible ez den arren, iOS-ek portaera hori imitatzen du, eta ondorioz elementu bat sakatu ondoren irauten duten pasabide-estilo "itxikorrak" izaten dira. Erabiltzaileek beste elementu bat ukitzen dutenean soilik kentzen dira pasatzeko estilo hauek. Jokabide hau desiragarritzat jotzen da, eta ez dirudi arazo bat Android edo Windows gailuetan.

Gure v4 alpha eta beta bertsioetan zehar, kode osatugabea eta iruzkinduta sartu dugu pasabidearen gainean emulatzen duten ukipen-gailuen arakatzaileetan pasatzeko estiloak desgaituko dituen multimedia-kontsulten shim bat aukeratzeko. Lan hau ez zen inoiz guztiz amaitu edo gaituta egon, baina erabat apurtzea ekiditeko, shim hau zaharkitzea eta mixin-ak sasi-klaseetarako lasterbide gisa mantentzea aukeratu dugu.

Inprimaketa

Nahiz eta arakatzaile moderno batzuetan inprimatzea bitxia izan daiteke.

Safari v8.0-tik aurrera, zabalera finkoko .containerklasea erabiltzeak Safari-k letra-tipo ezohiko tamaina txikia erabiltzea eragin dezake inprimatzerakoan. Ikusi #14868 alea eta WebKit #138192 akatsa xehetasun gehiagorako. Balizko konponbide bat CSS hau da:

@media print {
  .container {
    width: auto;
  }
}

Android stock arakatzailea

Kutxaz kanpo, Android 4.1 (eta, itxuraz, bertsio berriagoak ere) Arakatzailea aplikazioarekin bidaltzen da aukeratutako web arakatzaile lehenetsi gisa (Chrome-ren aurka). Zoritxarrez, Arakatzailea aplikazioak akats eta inkoherentzia asko ditu CSSrekin orokorrean.

Hautatu menua

Elementuetan , <select>Android stock arakatzaileak ez ditu alboko kontrolak bistaratuko border-radiuseta/edo borderaplikatuta badago. (Ikusi StackOverflow galdera hau xehetasunetarako.) Erabili beheko kode zatia CSS iraingarria kentzeko eta <select>estilorik gabeko elementu gisa errendatzeko Android stock arakatzailean. Erabiltzaile-agenteak sniffak Chrome, Safari eta Mozilla arakatzaileekin interferentziak saihesten ditu.

<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>

Adibide bat ikusi nahi? Ikusi JS Bin demo hau.

Balidatzaileak

Arakatzaile zahar eta akatsenei ahalik eta esperientzia onena eskaintzeko, Bootstrap- ek CSS arakatzaileen hackeak erabiltzen ditu hainbat tokitan CSS bereziak arakatzaileen bertsio jakin batzuetara bideratzeko, arakatzaileen akatsak konpontzeko. Hackeatu hauek CSS baliozkotzaileak baliogabeak direla kexatzea eragiten dute. Leku pare batean, oraindik guztiz estandarizatu gabeko CSS funtzionaltasun modernoak ere erabiltzen ditugu, baina hobekuntza progresiborako soilik erabiltzen dira.

Balidazio-abisu hauek ez dute axola praktikan, gure CSS-aren zati ez-hacky-ak guztiz balioztatzen baitu eta zati hackyek ez baitute oztopatzen zati ez-hacky-aren funtzionamendu egokia, horregatik nahita alde batera uzten ditugu abisu jakin hauek.

Gure HTML dokumentuek, halaber, HTML baliozkotze-abisu hutsal eta garrantzizko batzuk dituzte, Firefox-en akats jakin baterako konponbide bat sartu dugulako .