Böngészők és eszközök
Tudjon meg többet a Bootstrap által támogatott böngészőkről és eszközökről, a moderntől a régiig, beleértve az ismert furcsaságokat és hibákat.
Támogatott böngészők
A Bootstrap támogatja az összes főbb böngésző és platform legújabb, stabil kiadásait . Windows rendszeren az Internet Explorer 10-11 / Microsoft Edge böngészőt támogatjuk .
Az alternatív böngészők, amelyek a WebKit, Blink vagy Gecko legújabb verzióját használják, akár közvetlenül, akár a platform webnézet API-ján keresztül, nem támogatottak kifejezetten. A Bootstrapnak azonban (a legtöbb esetben) ezekben a böngészőkben is megfelelően kell megjelennie és működnie. Az alábbiakban részletesebb támogatási információk találhatók.
Támogatott böngészőink választékát és azok verzióit itt.browserslistrc file találja :
# 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
Az Autoprefixer segítségével kezeljük a tervezett böngészőtámogatást CSS-előtagokon keresztül, amely a Browserslist segítségével kezeli ezeket a böngészőverziókat. Tekintse meg a dokumentációjukat, hogy hogyan integrálhatja ezeket az eszközöket projektjeibe.
Mobil eszközök
Általánosságban elmondható, hogy a Bootstrap támogatja az egyes nagyobb platformok alapértelmezett böngészőinek legújabb verzióit. Vegye figyelembe, hogy a proxy böngészők (például Opera Mini, Opera Mobile Turbo mód, UC Browser Mini, Amazon Silk) nem támogatottak.
| Króm | Firefox | Szafari | Android böngésző és WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Támogatott | Támogatott | N/A | Android v5.0+ támogatott | Támogatott |
| iOS | Támogatott | Támogatott | Támogatott | N/A | Támogatott |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Támogatott |
Asztali böngészők
Hasonlóképpen, a legtöbb asztali böngésző legújabb verziója támogatott.
| Króm | Firefox | internet böngésző | Microsoft Edge | Opera | Szafari | |
|---|---|---|---|---|---|---|
| Mac | Támogatott | Támogatott | N/A | Támogatott | Támogatott | Támogatott |
| ablakok | Támogatott | Támogatott | Támogatott, IE10+ | Támogatott | Támogatott | Nem támogatott |
A Firefox esetében a legújabb normál stabil kiadás mellett a Firefox legújabb kiterjesztett támogatási kiadását (ESR) is támogatjuk .
Nem hivatalosan a Bootstrapnek elég jól kell kinéznie és jól kell viselkednie a Chromiumban és a Chrome for Linuxban, a Firefox for Linuxban és az Internet Explorer 9-ben, bár ezek hivatalosan nem támogatottak.
Azon böngészőhibák listájáért, amelyekkel a Bootstrapnak meg kell küzdenie, tekintse meg a böngészőhibák falát .
internet böngésző
Az Internet Explorer 10+ támogatott; IE9 és le nem. Kérjük, vegye figyelembe, hogy egyes CSS3-tulajdonságok és HTML5-elemek nem támogatottak teljes mértékben az IE10-ben, vagy előtagolt tulajdonságokat igényelnek a teljes funkcionalitás érdekében. Látogassa meg a Használhatom… oldalt a CSS3 és HTML5 funkciók böngészők támogatásával kapcsolatos részletekért. Ha IE8-9 támogatásra van szüksége, használja a Bootstrap 3-at.
Modálok és legördülő menük mobilon
Túlcsordulás és görgetés
overflow: hidden;Az <body>elem támogatása meglehetősen korlátozott iOS és Android rendszeren. Ebből a célból, ha valamelyik eszköz böngészőjében átgörget egy modál tetején vagy alján, a <body>tartalom gördülni kezd. Lásd : 175502. számú Chrome-hiba (javítva a Chrome v40-ben) és 153852. számú WebKit-hiba .
iOS szövegmezők és görgetés
Az iOS 9.2-től kezdve, amíg egy modális nyitva van, és ha a görgetés kezdeti érintése egy szöveg <input>vagy egy szöveg határain belül van <textarea>, <body>akkor a modális alatti tartalom görgetésre kerül a modális helyett. Lásd a WebKit 153856. számú hibáját .
Navbar Legördülő menük
A .dropdown-backdropz-indexelés összetettsége miatt az elemet nem használják iOS rendszeren a navigációban. Így a navigációs sávok legördülő menüinek bezárásához közvetlenül a legördülő elemre kell kattintania (vagy bármely más elemre, amely kattintási eseményt indít el iOS rendszerben ).
Böngésző nagyítása
Az oldalnagyítás elkerülhetetlenül renderelési műtermékeket tartalmaz egyes összetevőkben, mind a Bootstrapben, mind az internet többi részén. A problémától függően lehetséges, hogy ki tudjuk javítani (először keressen, majd ha szükséges, nyissa meg a problémát). Ezeket azonban hajlamosak vagyunk figyelmen kívül hagyni, mivel gyakran nincs közvetlen megoldásuk, csak a trükkös megoldások.
Ragadós :hover/ :focusiOS rendszeren
Bár :hoverez a legtöbb érintőképernyős eszközön nem lehetséges, az iOS emulálja ezt a viselkedést, ami „ragadós” lebegtetési stílusokat eredményez, amelyek az egyik elem megérintése után is megmaradnak. Ezeket a lebegtetési stílusokat csak akkor távolítja el a rendszer, ha a felhasználók egy másik elemre koppintanak. Ezt a viselkedést nagyrészt nemkívánatosnak tekintik, és úgy tűnik, hogy nem jelent problémát Android vagy Windows eszközökön.
A 4-es alfa- és bétaverzióink során hiányos és megjegyzésekkel kiegészített kódot használtunk egy olyan médialekérdezési alátét használatához, amely letiltja a lebegési stílusokat az érintőképernyős eszközök böngészőiben, amelyek emulálják a lebegést. Ez a munka soha nem volt teljesen befejezve vagy engedélyezve, de a teljes törés elkerülése érdekében úgy döntöttünk, hogy megszüntetjük ezt az alátétet , és megtartjuk a mixineket az álosztályok parancsikonjaként.
Nyomtatás
Még néhány modern böngészőben is furcsa lehet a nyomtatás.
A Safari v8.0-tól kezdve a fix szélességű .containerosztály használata miatt a Safari szokatlanul kis betűméretet használ a nyomtatás során. További részletekért lásd a 14868 -as számot és a 138192 -es számú WebKit-hibát. Az egyik lehetséges megoldás a következő CSS:
@media print {
.container {
width: auto;
}
}
Android részvényböngésző
A dobozból kivéve az Android 4.1-et (és még néhány újabb kiadást is) a Böngésző alkalmazással szállítják alapértelmezett webböngészőként (a Chrome-mal ellentétben). Sajnos a Böngésző alkalmazásnak sok hibája van, és általában véve a CSS-hez való következetlenség.
Válassza ki a menüt
Az <select>elemeken az Android készletböngészője nem jeleníti meg az oldalsó vezérlőket, ha van border-radiusés/vagy borderalkalmazzák. (A részletekért lásd ezt a StackOverflow-kérdést .) Az alábbi kódrészlet segítségével távolítsa el a sértő CSS- t, és <select>jelenítse meg stílustalan elemként az Android tőzsdei böngészőjében. A felhasználói ügynök szippantása elkerüli a Chrome, a Safari és a Mozilla böngészők interferenciáját.
<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>
Szeretne példát látni? Nézze meg ezt a JS Bin bemutatót .
Validátorok
Annak érdekében, hogy a lehető legjobb élményt nyújtsa a régi és hibás böngészőknek, a Bootstrap több helyen CSS-böngésző-feltöréseket használ , hogy speciális CSS-t célozzon meg bizonyos böngészőverziókra, hogy kikerülje a böngészők hibáit. Ezek a feltörések érthető módon arra késztetik a CSS-ellenőrzőket, hogy panaszkodjanak, hogy érvénytelenek. Néhány helyen olyan élvonalbeli CSS-szolgáltatásokat is használunk, amelyek még nincsenek teljesen szabványosítva, de ezeket pusztán progresszív fejlesztésre használjuk.
Ezek az érvényesítési figyelmeztetések a gyakorlatban nem számítanak, mivel CSS-ünk nem feltört része teljes mértékben érvényesít, és a feltört részek nem zavarják a nem feltört rész megfelelő működését, ezért szándékosan figyelmen kívül hagyjuk ezeket a figyelmeztetéseket.
A HTML-dokumentumaink szintén tartalmaznak néhány triviális és lényegtelen HTML-ellenőrzési figyelmeztetést, mivel egy bizonyos Firefox-hiba megoldását tartalmaztuk .