Vafrar og tæki
Lærðu um vafrana og tækin, frá nútíma til gömul, sem eru studd af Bootstrap, þar á meðal þekkta sérkenni og villur fyrir hvern.
Styður vafrar
Bootstrap styður nýjustu, stöðugu útgáfur allra helstu vafra og kerfa. Í Windows styðjum við Internet Explorer 10-11 / Microsoft Edge .
Aðrir vafrar sem nota nýjustu útgáfuna af WebKit, Blink eða Gecko, hvort sem þeir eru beint eða í gegnum vefskoðunarforritaskil vettvangsins, eru ekki beinlínis studdir. Hins vegar ætti Bootstrap (í flestum tilfellum) að birtast og virka rétt í þessum vöfrum líka. Nánari upplýsingar um aðstoð eru veittar hér að neðan.
Þú getur fundið stutt úrval vafra og útgáfur þeirra í okkar.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
Við notum Autoprefixer til að sjá um fyrirhugaðan vafrastuðning í gegnum CSS forskeyti, sem notar Browserslist til að stjórna þessum vafraútgáfum. Skoðaðu skjöl þeirra til að fá upplýsingar um hvernig á að samþætta þessi verkfæri í verkefnin þín.
Farsímar
Almennt séð styður Bootstrap nýjustu útgáfur af sjálfgefnum vöfrum hvers helstu vettvangs. Athugaðu að proxy vafrar (eins og Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) eru ekki studdir.
| Króm | Firefox | Safari | Android vafri & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Stuðningur | Stuðningur | N/A | Android v5.0+ stutt | Stuðningur |
| iOS | Stuðningur | Stuðningur | Stuðningur | N/A | Stuðningur |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Stuðningur |
Skrifborðsvafrar
Á sama hátt eru nýjustu útgáfur flestra skrifborðsvafra studdar.
| Króm | Firefox | Internet Explorer | Microsoft Edge | Ópera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Stuðningur | Stuðningur | N/A | Stuðningur | Stuðningur | Stuðningur |
| Windows | Stuðningur | Stuðningur | Styður, IE10+ | Stuðningur | Stuðningur | Ekki stutt |
Fyrir Firefox, til viðbótar við nýjustu venjulegu stöðugu útgáfuna, styðjum við einnig nýjustu Extended Support Release (ESR) útgáfuna af Firefox.
Óopinberlega ætti Bootstrap að líta út og haga sér nógu vel í Chromium og Chrome fyrir Linux, Firefox fyrir Linux og Internet Explorer 9, þó að þau séu ekki opinberlega studd.
Fyrir lista yfir nokkrar vafravillur sem Bootstrap þarf að glíma við, sjá Wall of vafragalla okkar .
Internet Explorer
Internet Explorer 10+ er stutt; IE9 og niður er það ekki. Vinsamlegast hafðu í huga að sumir CSS3 eiginleikar og HTML5 þættir eru ekki að fullu studdir í IE10, eða þurfa forskeyti eiginleika fyrir fulla virkni. Heimsæktu Get ég notað... til að fá upplýsingar um vafrastuðning við CSS3 og HTML5 eiginleika. Ef þú þarft IE8-9 stuðning, notaðu Bootstrap 3.
Modals og fellivalmyndir í farsíma
Yfirfall og fletting
Stuðningur overflow: hidden;við <body>þáttinn er frekar takmarkaður í iOS og Android. Í því skyni, þegar þú flettir framhjá efst eða neðst á modal í öðrum vöfrum þessara tækja, mun <body>efnið byrja að fletta. Sjá Chrome villu #175502 (löguð í Chrome v40) og WebKit villu #153852 .
iOS textareitir og skrun
Frá og með iOS 9.2, á meðan mótal er opið, ef upphafssnerting skrunbendinga er innan marka texta <input>eða <textarea>, verður <body>efnið undir mótalanum skrunað í stað formsins sjálfs. Sjá WebKit villu #153856 .
Navbar fellilista
Einingin .dropdown-backdroper ekki notuð á iOS í nav vegna þess hversu flókin z-vísitölu er. Þannig, til að loka fellivalmyndum í navbars, verður þú að smella beint á fellilistann (eða annan þátt sem kveikir á smelliviðburði í iOS ).
Aðdráttur vafra
Aðdráttur síðu sýnir óhjákvæmilega flutningsgripi í sumum hlutum, bæði í Bootstrap og restinni af vefnum. Það fer eftir vandamálinu, við gætum hugsanlega lagað það (leitaðu fyrst og opnaðu síðan mál ef þörf krefur). Hins vegar höfum við tilhneigingu til að hunsa þetta þar sem þeir hafa oft enga beina lausn aðra en tölvuþrjóta lausnir.
Sticky :hover/ :focusá iOS
Þó að :hoverþað sé ekki mögulegt í flestum snertitækjum, líkir iOS eftir þessari hegðun, sem leiðir til „límandi“ sveiflustíla sem haldast eftir að ýtt er á einn þátt. Þessir sveitastílar eru aðeins fjarlægðir þegar notendur pikka á annan þátt. Þessi hegðun er talin að mestu leyti óæskileg og virðist ekki vera vandamál í Android eða Windows tækjum.
Í gegnum v4 alfa og beta útgáfur okkar settum við inn ófullkominn og ummælalausan kóða til að velja miðlunarfyrirspurnarskil sem myndi slökkva á sveimstílum í vöfrum snertitækja sem líkja eftir sveimi. Þessu verki var aldrei lokið að fullu eða virkjað, en til að forðast algjört brot, höfum við valið að afnema þetta shim og halda blöndunum sem flýtileiðum fyrir gerviflokkana.
Prentun
Jafnvel í sumum nútímavöfrum getur prentun verið einkennileg.
Frá og með Safari v8.0 getur notkun á fastbreiddarflokknum .containervaldið því að Safari notar óvenju litla leturstærð við prentun. Sjá tölublað #14868 og WebKit villu #138192 fyrir frekari upplýsingar. Ein hugsanleg lausn er eftirfarandi CSS:
@media print {
.container {
width: auto;
}
}
Android lager vafri
Upp úr kassanum er Android 4.1 (og jafnvel nokkrar nýrri útgáfur greinilega) sendar með vafraforritinu sem sjálfgefinn vefvafra (öfugt við Chrome). Því miður hefur vafraforritið fullt af villum og ósamræmi við CSS almennt.
Veldu valmynd
Á <select>þáttum mun Android lager vafri ekki sýna hliðarstýringar ef það er border-radiusog/eða bordernotað. (Sjá þessa StackOverflow spurningu fyrir nánari upplýsingar.) Notaðu kóðabútinn hér að neðan til að fjarlægja móðgandi CSS og gera það <select>sem óstílað þátt í Android hlutabréfavafranum. Umboðsmaður notenda að þefa forðast truflanir á Chrome, Safari og Mozilla vöfrum.
<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>
Viltu sjá dæmi? Skoðaðu þessa JS Bin kynningu .
Löggildingaraðilar
Til þess að veita gömlum og gallalausum vöfrum sem besta upplifun notar Bootstrap CSS vafrahakk á nokkrum stöðum til að miða sérstaka CSS að ákveðnum vafraútgáfum til að vinna í kringum villur í vöfrunum sjálfum. Þessar járnsög valda skiljanlega CSS staðfestingaraðilum að kvarta yfir því að þau séu ógild. Á nokkrum stöðum notum við einnig háþróaða CSS eiginleika sem eru ekki enn að fullu staðlaðir, en þeir eru eingöngu notaðir til að auka enn frekar.
Þessar staðfestingarviðvaranir skipta ekki máli í reynd þar sem hluti CSS okkar sem ekki er hakkaður er fullgiltur og innbrotshlutarnir trufla ekki rétta virkni hins óhakkaða hluta, þess vegna hunsum við vísvitandi þessar tilteknu viðvaranir.
HTML skjölin okkar eru sömuleiðis með léttvægar og ómarkvissar HTML staðfestingarviðvaranir vegna þess að við höfum sett inn lausn fyrir ákveðinn Firefox villu .