Browsers en apparaten
Learje oer de browsers en apparaten, fan modern oant âld, dy't wurde stipe troch Bootstrap, ynklusyf bekende eigenaardichheden en bugs foar elk.
Stipe browsers
Bootstrap stipet de lêste, stabile releases fan alle grutte browsers en platfoarms. Op Windows stypje wy Internet Explorer 10-11 / Microsoft Edge .
Alternative browsers dy't de lêste ferzje fan WebKit, Blink, of Gecko brûke, itsij direkt as fia de webwerjefte API fan it platfoarm, wurde net eksplisyt stipe. Bootstrap moat lykwols (yn 'e measte gefallen) ek yn dizze browsers goed werjaan en funksjonearje. Mear spesifike stipeynformaasje wurdt hjirûnder jûn.
Jo kinne ús stipe oanbod fan browsers en har ferzjes fine yn ús.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
Wy brûke Autoprefixer om de bedoelde browserstipe te behanneljen fia CSS-foarheaksels, dy't Browserslist brûkt om dizze browserferzjes te behearjen. Rieplachtsje har dokumintaasje foar hoe't jo dizze ark kinne yntegrearje yn jo projekten.
Mobile apparaten
Yn 't algemien stipet Bootstrap de lêste ferzjes fan' e standertbrowsers fan elke grutte platfoarm. Tink derom dat proxy-browsers (lykas Opera Mini, Opera Mobile's Turbo-modus, UC Browser Mini, Amazon Silk) net wurde stipe.
| Chrome | Firefox | Safari | Android Browser en WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Stipe | Stipe | N/A | Android v5.0+ stipe | Stipe |
| iOS | Stipe | Stipe | Stipe | N/A | Stipe |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Stipe |
Buroblêd browsers
Op deselde manier wurde de lêste ferzjes fan de measte buroblêdbrowsers stipe.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Stipe | Stipe | N/A | Stipe | Stipe | Stipe |
| Windows | Stipe | Stipe | Stipe, IE10+ | Stipe | Stipe | Net ûndersteund |
Foar Firefox stypje wy, neist de lêste normale stabile release, ek de lêste Extended Support Release (ESR) ferzje fan Firefox.
Unoffisjeel soe Bootstrap goed genôch sjen en gedrage moatte yn Chromium en Chrome foar Linux, Firefox foar Linux, en Internet Explorer 9, hoewol se net offisjeel wurde stipe.
Foar in list fan guon fan 'e browser-bugs dêr't Bootstrap mei te krijen hat, sjoch ús Wall of browser-bugs .
Internet Explorer
Internet Explorer 10+ wurdt stipe; IE9 en del is net. Wês asjebleaft bewust dat guon CSS3-eigenskippen en HTML5-eleminten net folslein wurde stipe yn IE10, of fereaske eigenskippen foar folsleine funksjonaliteit. Besykje Kin ik brûke ... foar details oer browserstipe fan CSS3- en HTML5-funksjes. As jo IE8-9-stipe nedich binne, brûk dan Bootstrap 3.
Modalen en dropdowns op mobyl
Oerfloed en rôlje
Stipe foar overflow: hidden;op it <body>elemint is frij beheind yn iOS en Android. Dêrta, as jo foarby de boppe- of ûnderkant fan in modal rôlje yn ien fan 'e browsers fan dizze apparaten, sil de <body>ynhâld begjinne te rôljen. Sjoch Chrome-bug #175502 (reparearre yn Chrome v40) en WebKit-bug #153852 .
iOS-tekstfjilden en rôlje
As fan iOS 9.2, wylst in modal iepen is, as de earste touch fan in rôlgebeart binnen de grins is fan in tekst <input>of in <textarea>, sil de <body>ynhâld ûnder de modal rôle wurde ynstee fan de modal sels. Sjoch WebKit bug #153856 .
Navbar Dropdowns
It .dropdown-backdropelemint wurdt net brûkt op iOS yn 'e nav fanwegen de kompleksiteit fan z-yndeksearring. Sa, om dropdowns yn navbars te sluten, moatte jo direkt op it dropdown-elemint klikke (of in oar elemint dat in klikbarren yn iOS sil ûntstean ).
Browser zoomjen
Side-zoomen presintearret ûnûntkomber rendering-artefakten yn guon komponinten, sawol yn Bootstrap as de rest fan it web. Ofhinklik fan it probleem kinne wy it miskien reparearje (earst sykje en dan in probleem iepenje as dat nedich is). Wy hawwe lykwols de neiging om dizze te negearjen, om't se faaks gjin direkte oplossing hawwe oars as hacky oplossingen.
Sticky :hover/ :focusop iOS
Hoewol :hoverit net mooglik is op de measte touch-apparaten, emuleart iOS dit gedrach, wat resulteart yn "kleverige" hoverstilen dy't oanhâlde nei it oanboarjen fan ien elemint. Dizze hoverstilen wurde allinich fuortsmiten as brûkers op in oar elemint tikke. Dit gedrach wurdt beskôge foar in grut part net winske en liket gjin probleem te wêzen op Android- of Windows-apparaten.
Yn 'e rin fan ús alfa- en beta-releases fan v4 hawwe wy ûnfolsleine en kommentearre koade opnommen om te kiezen foar in shim foar mediafraach dy't hoverstilen soe útskeakelje yn browsers foar touchapparaten dy't sweven emulearje. Dit wurk is nea folslein foltôge of ynskeakele, mar om folsleine breuk te foarkommen, hawwe wy der foar keazen om dizze shim ôf te skriuwen en de mixins te hâlden as fluchtoetsen foar de pseudo-klassen.
Printsjen
Sels yn guon moderne browsers kin printsjen eigensinnich wêze.
Fanôf Safari v8.0 kin it gebrûk fan 'e .containerklasse mei fêste breedte feroarsaakje dat Safari in ûngewoan lytse lettergrutte brûkt by it printsjen. Sjoch útjefte #14868 en WebKit-bug #138192 foar mear details. Ien potensjele oplossing is de folgjende CSS:
@media print {
.container {
width: auto;
}
}
Android stock blêder
Ut it fak wurdt Android 4.1 (en sels wat nijere releases blykber) ferstjoerd mei de Browser-app as de standert webbrowser fan kar (yn tsjinstelling ta Chrome). Spitigernôch hat de Browser-app in protte bugs en ynkonsistinsjes mei CSS yn 't algemien.
Selektearje menu
Op <select>eleminten sil de Android-stockblêder de sydkontrôles net werjaan as d'r in border-radiusen / of bordertapast is. (Sjoch dizze StackOverflow-fraach foar details.) Brûk it stikje koade hjirûnder om de misledigjende CSS te ferwiderjen en it <select>as in unstyled elemint op 'e Android-stockblêder wer te jaan. It snuffeljen fan brûkersagent foarkomt ynterferinsje mei Chrome-, Safari- en Mozilla-browsers.
<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>
Wolle jo in foarbyld sjen? Besjoch dizze JS Bin demo .
Validators
Om de bêste mooglike ûnderfining te leverjen oan âlde en buggy browsers, brûkt Bootstrap CSS-browserhacks op ferskate plakken om spesjale CSS te rjochtsjen op bepaalde browserferzjes om bugs yn 'e browsers sels om te wurkjen. Dizze hacks feroarsaakje begryplik CSS-validators om te kleien dat se ûnjildich binne. Op in pear plakken brûke wy ek bleedende CSS-funksjes dy't noch net folslein standerdisearre binne, mar dizze wurde puur brûkt foar progressive ferbettering.
Dizze warskôgings foar falidaasje meitsje yn 'e praktyk neat út, om't it net-hacky diel fan ús CSS folslein falidearret en de hacky-dielen net ynterferearje mei it goede funksjonearjen fan it net-hacky diel, dêrom negearje wy dizze bepaalde warskôgings bewust.
Us HTML-dokuminten hawwe ek wat triviale en ûngemaklike warskôgings foar HTML-validaasje fanwege ús opnimmen fan in oplossing foar in bepaalde Firefox-bug .