Brauzerler we enjamlar
“Bootstrap” tarapyndan goldanýan brauzerler we enjamlar, şol sanda hersi üçin belli jedeller we näsazlyklar barada öwreniň.
Goldanýan brauzerler
“Bootstrap ” ähli esasy brauzerleriň we platformalaryň iň soňky, durnukly çykmagyny goldaýar. Windows-da Internet Explorer 10-11 / Microsoft Edge-ni goldaýarys .
WebKit, Blink ýa-da Gecko-nyň iň soňky wersiýasyny ulanýan alternatiw brauzerler, göni ýa-da platformanyň web görnüşi API arkaly bolsun, aç-açan goldanylmaýar. Şeýle-de bolsa, “Bootstrap” (köp halatlarda) bu brauzerlerde-de dogry görkezmeli we işlemeli. Has anyk goldaw maglumatlary aşakda berilýär.
Goldaw berýän brauzerlerimizi we olaryň wersiýalaryny şu.browserslistrc file ýerden tapyp bilersiňiz :
# 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
Bu brauzer wersiýalaryny dolandyrmak üçin brauzer sanawyny ulanýan CSS prefiksleri arkaly göz öňünde tutulan brauzer goldawyny dolandyrmak üçin “ Autoprefixer ” -i ulanýarys . Bu gurallary taslamalaryňyza nädip birikdirmelidigi barada resminamalaryna serediň.
Jübi enjamlary
Umuman aýdanyňda, Bootstrap her esasy platformanyň esasy brauzerleriniň iň soňky wersiýalaryny goldaýar. Proksi brauzerleriniň (Opera Mini, Opera Mobile-nyň Turbo rejimi, UC Browser Mini, Amazon Silk ýaly) goldanmaýandygyny ýadyňyzdan çykarmaň.
| Chrome | Firefox | Safari | Android brauzeri we webView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Goldaw | Goldaw | N / A | Android v5.0 + goldaýar | Goldaw |
| iOS | Goldaw | Goldaw | Goldaw | N / A | Goldaw |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Goldaw |
Stol brauzerleri
Şonuň ýaly-da, iş stoly brauzerleriniň köpüsiniň iň soňky wersiýalary goldanýar.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Goldaw | Goldaw | N / A | Goldaw | Goldaw | Goldaw |
| Windows | Goldaw | Goldaw | Goldaw, IE10 + | Goldaw | Goldaw | Goldaw berilmeýär |
“Firefox” üçin iň soňky adaty durnukly goýberişden başga-da, “Firefox” -yň iň soňky “ Giňeldilen goldaw goýberiş” (ESR) wersiýasyny hem goldaýarys.
Resmi däl bolsa, Bootstrap resmi taýdan goldanylmasa-da, Linux üçin Chromium we Chrome, Linux üçin Firefox we Internet Explorer 9-da ýeterlik derejede özüni alyp barmaly.
“Bootstrap” -yň çözmeli käbir brauzer säwlikleriniň sanawy üçin brauzerimizdäki näsazlyklar diwaryna serediň .
Internet Explorer
Internet Explorer 10+ goldaýar; IE9 we aşak däl. Käbir CSS3 häsiýetleriniň we HTML5 elementleriniň IE10-da doly goldanmaýandygyny ýa-da doly işlemegi üçin prefiksi häsiýetleri talap edýändigini ýadyňyzdan çykarmaň. CSS3 we HTML5 aýratynlyklaryny brauzer goldawy barada jikme-jiklikler üçin ulanyp bilerinmi? IE8-9 goldawy gerek bolsa, Bootstrap 3 ulanyň.
Jübi telefonlarynda modallar we aşak düşmeler
Artmak we aýlamak
overflow: hidden;Element üçin goldaw <body>iOS we Android-de gaty çäklidir. Şol maksat bilen, şol enjamlaryň brauzerleriniň birinde modalyň ýokarsyny ýa-da aşagyny aýlasaňyz, <body>mazmun aýlanyp başlar. Chrome bug # 175502 ( Chrome v40-da düzedilen) we WebKit bug # 153852 serediň .
iOS tekst meýdanlary we aýlamak
IOS 9.2-de bolşy ýaly, modal açyk bolsa, aýlaw hereketiniň ilkibaşdaky teksti tekstiň <input>ýa-da a -nyň çäginde bolsa <textarea>, <body>modalyň aşagyndaky mazmun modalyň özi däl-de, aýlanar. WebKit bug # 153856 serediň .
Gämi duralgasy
.dropdown-backdropZ-indeksirlemegiň çylşyrymlylygy sebäpli bu element deňizde iOS-da ulanylmaýar . Şeýlelik bilen, deňiz panellerindäki açylanlary ýapmak üçin aşak düşýän elemente (ýa-da iOS-da basmak hadysasyny ýakjak başga element ) göni basmaly.
Brauzeri ulaltmak
Sahypany ulaltmak hökmany suratda “Bootstrap” -da we webiň beýleki böleklerinde görkezilen eserleri görkezýär. Meselä baglylykda, ony düzedip bileris (ilki gözläň, zerur bolsa bir meseläni açyň). Şeýle-de bolsa, bulary äsgermezlik edýäris, sebäbi köplenç hackly işlerden başga göni çözgüt ýok.
IOS-da ýelmeýän :hover/ ýapyk:focus
Duýgur enjamlaryň köpüsinde mümkin däl bolsa :hover-da, iOS bu häsiýeti emele getirýär, netijede bir elemente degeninden soňam dowam edýän “ýelmeşýän” aýlaw stilleri bolýar. Bu aýlaw stilleri diňe ulanyjylar başga bir elemente degenlerinde aýrylýar. Bu özüňi alyp barmak, esasan, islenmeýän hasaplanýar we Android ýa-da Windows enjamlarynda mesele däl ýaly.
V4 alfa we beta goýberişlerimiziň dowamynda, dolanyşygy emele getirýän duýgur enjam brauzerlerinde gezelenç stillerini öçürip biljek media talaplaryny saýlamak üçin doly däl we düşündiriş koduny goşduk. Bu iş hiç haçan doly tamamlanmady ýa-da işledilmedi, ýöne doly döwülmezligi üçin bu ýalpyldawuklygy ýitirmegi we garyndylary pseudo-synplar üçin gysga ýol hökmünde saklamagy makul bildik.
Çap etmek
Käbir döwrebap brauzerlerde-de çap etmek gaty gyzykly bolup biler.
Safari v8.0 ýagdaýyna görä, giň giňlikdäki .containersynpyň ulanylmagy, Safari çap edilende adatdan daşary kiçi şrift ululygyny ulanmagyna sebäp bolup biler. Has giňişleýin maglumat üçin # 14868 we WebKit bug # 138192 serediň. Mümkin bolan çözgütleriň biri aşakdaky CSS:
@media print {
.container {
width: auto;
}
}
Android aksiýa brauzeri
“Android 4.1” (hatda käbir täze çykanlar hem) brauzer programmasy bilen deslapky web brauzeri hökmünde saýlanýar (Chrome-dan tapawutlylykda). Gynansagam, Brauzer programmasynda köp sanly kemçilikler we umuman CSS bilen gapma-garşylyklar bar.
Menýu saýlaň
Elementlerde, we / ýa-da ulanylýan bolsa <select>, Android aksiýa brauzeri gapdal dolandyryşlary görkezmez . ( Jikme-jiklikler üçin şu StackOverflow soragyna serediň.) Göwnüňize degýän CSS-i aýyrmak we Android aksiýa brauzerinde tertipsiz element hökmünde görkezmek üçin aşakdaky kod parçasyny ulanyň. Ulanyjy agentiniň ys almagy, Chrome, Safari we Mozilla brauzerlerine päsgelçiliklerden gaça durýar.border-radiusborder<select>
<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>
Mysal görmek isleýärsiňizmi? Bu JS Bin demosyna göz aýlaň .
Barlaýjylar
Köne we ýalňyş brauzerlere iň oňat tejribe bermek üçin Bootstrap , brauzerleriň özlerinde ýüze çykýan näsazlyklaryň üstünde işlemek üçin belli bir brauzer wersiýalaryna ýörite CSS-ni nyşana almak üçin birnäçe ýerde CSS brauzer hakerlerini ulanýar. Bu haklar CSS tassyklaýjylarynyň nädogrydygyna nägilelik bildirmegine sebäp bolýar. Birnäçe ýerde, entek doly standartlaşdyrylmadyk ganly CSS aýratynlyklaryny ulanýarys, ýöne bular diňe progressiw güýçlendirmek üçin ulanylýar.
Bu tassyklama duýduryşlary iş ýüzünde möhüm däl, sebäbi CSS-iň hack däl bölegi doly tassyklanýar we hakly bölekler haker däl bölegiň dogry işlemegine päsgel bermeýär, şonuň üçin bu duýduryşlary bilgeşleýin äsgermezlik edýäris.
HTML resminamalarymyzda belli bir Firefox näsazlygy üçin iş meýilnamasynyň goşulmagy sebäpli käbir ownuk we ähmiýetsiz HTML tassyklama duýduryşlary bar .