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.
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 .
Azok 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 és azok verziói itt találhatókpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"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.
Á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 |
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 | N/A | 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 .
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. Ez a kódunk legstabilabb verziója, és csapatunk továbbra is támogatja a kritikus hibajavítások és a dokumentáció módosításai miatt. Azonban nem adnak hozzá új funkciókat.
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 .
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öveges <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 .
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 ).
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.
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.
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;
}
}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ásban sok hiba és inkonzisztencia van a CSS-sel általában.
Az <select>elemeken az Android készletböngésző 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.
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 érvénytelenek legyenek. 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.
HTML-dokumentumaink szintén tartalmaznak néhány triviális és lényegtelen HTML-érvényesítési figyelmeztetést, mivel egy bizonyos Firefox-hiba megoldását tartalmaztuk .