Source

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 .

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ók.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

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

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 .

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 ellátott kódot használtunk a médialekérdezési alátétre való feliratkozáshoz, amely letiltja a lebegési stílusokat a lebegést emuláló érintőeszközök böngészőiben. 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 parancsikonként az álosztályokhoz.

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ámú kiadást é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ásban sok hiba és inkonzisztencia van a CSS-sel általában.

Válassza ki a menüt

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? Tekintse 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 é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 .