Navigatè ak aparèy
Aprann sou navigatè yo ak aparèy, soti nan modèn ak ansyen, ki sipòte pa Bootstrap, ki gen ladan bizarak li te ye ak pinèz pou chak.
Bootstrap sipòte dènye, ki estab degaje tout gwo navigatè ak platfòm. Sou Windows, nou sipòte Internet Explorer 10-11 / Microsoft Edge .
Navigatè altènatif ki sèvi ak dènye vèsyon WebKit, Blink, oswa Gecko, kit se dirèkteman oswa atravè API web view platfòm la, pa klèman sipòte. Sepandan, Bootstrap ta dwe (nan pifò ka) montre ak fonksyone kòrèkteman nan navigatè sa yo tou. Yo bay plis enfòmasyon sou sipò espesifik anba a.
Ou ka jwenn seri navigatè ki sipòte nou yo ak vèsyon yo nan nou anpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Nou itilize Autoprefixer pou jere sipò navigatè ki gen entansyon atravè prefiks CSS, ki itilize Browserslist pou jere vèsyon navigatè sa yo. Konsilte dokiman yo pou kijan pou entegre zouti sa yo nan pwojè ou yo.
Anjeneral, Bootstrap sipòte dènye vèsyon navigatè default chak gwo platfòm yo. Remake byen ke navigatè proxy (tankou Opera Mini, mòd Turbo Opera Mobile a, UC Browser Mini, Amazon Silk) pa sipòte.
| Chrome | Firefox | Safari | Navigatè Android ak WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Sipòte | Sipòte | N/A | Android v5.0+ sipòte | Sipòte |
| iOS | Sipòte | Sipòte | Sipòte | N/A | Sipòte |
| Windows 10 mobil | N/A | N/A | N/A | N/A | Sipòte |
Menm jan an tou, dènye vèsyon yo nan pifò navigatè Desktop yo sipòte.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Sipòte | Sipòte | N/A | N/A | Sipòte | Sipòte |
| Windows | Sipòte | Sipòte | Sipòte, IE10+ | Sipòte | Sipòte | Pa sipòte |
Pou Firefox, anplis de dènye lage nòmal ki estab, nou sipòte tou dènye vèsyon Firefox (ESR) pou dènye sipò .
Ofisyèlman, Bootstrap ta dwe gade ak konpòte ase byen nan Chromium ak Chrome pou Linux, Firefox pou Linux, ak Internet Explorer 9, menmsi yo pa ofisyèlman sipòte.
Pou jwenn yon lis kèk nan ensèk navigatè yo ke Bootstrap gen pou lite ak, gade miray nou an nan pinèz navigatè yo .
Internet Explorer 10+ sipòte; IE9 ak desann se pa. Tanpri sonje ke kèk pwopriyete CSS3 ak eleman HTML5 yo pa konplètman sipòte nan IE10, oswa mande pwopriyete prefiks pou fonksyonalite konplè. Vizite Èske mwen ka itilize... pou plis detay sou sipò navigatè a nan karakteristik CSS3 ak HTML5.
Si ou bezwen sipò IE8-9, sèvi ak Bootstrap 3. Li se vèsyon ki pi estab nan kòd nou an epi li toujou sipòte pa ekip nou an pou korije ensèk kritik ak chanjman dokiman. Sepandan, pa gen okenn nouvo karakteristik yo pral ajoute nan li.
Sipò pou overflow: hidden;sou <body>eleman an se byen limite nan iOS ak android. Pou sa ka fèt, lè ou pase anwo oswa anba yon modal nan nenpòt nan navigatè aparèy sa yo, <body>kontni an ap kòmanse woule. Gade ensèk Chrome #175502 (ranje nan Chrome v40) ak ensèk WebKit #153852 .
Apati iOS 9.2, pandan yon modal louvri, si premye manyen yon jès woulo liv se nan fwontyè yon tèks <input>oswa yon <textarea>, <body>kontni ki anba modal la pral defile olye pou yo modal nan tèt li. Gade ensèk WebKit #153856 .
Eleman .dropdown-backdropan pa itilize sou iOS nan nav la akòz konpleksite z-indexing. Kidonk, pou fèmen dropdowns nan navbars, ou dwe dirèkteman klike sou eleman dropdown la (oswa nenpòt lòt eleman ki pral tire yon evènman klike sou iOS ).
Zooming paj inevitableman prezante zafè rann nan kèk eleman, tou de nan Bootstrap ak rès la nan entènèt la. Tou depan de pwoblèm nan, nou ka kapab ranje li (chèche an premye epi ouvri yon pwoblèm si sa nesesè). Sepandan, nou gen tandans inyore sa yo paske yo souvan pa gen okenn solisyon dirèk lòt pase solisyon Hacky.
Pandan ke :hoverli pa posib sou pifò aparèy manyen, iOS imite konpòtman sa a, sa ki lakòz estil "kolan" ki pèsiste apre yo fin frape yon eleman. Estil hover sa yo retire sèlman lè itilizatè yo tape yon lòt eleman. Konpòtman sa a konsidere kòm lajman endezirab epi li parèt pa yon pwoblèm sou aparèy Android oswa Windows.
Pandan tout vèsyon alfa ak beta v4 nou yo, nou te enkli kòd enkonplè ak kòmantè pou chwazi nan yon shim rechèch medya ki ta enfim estil hover nan navigatè aparèy manyen ki imite plan. Travay sa a pa t janm fini nèt oswa pèmèt, men pou evite kraze nèt sou tout pwen, nou te chwazi pou deprere shim sa a epi kenbe mixin yo kòm rakoursi pou pseudo-klas yo.
Menm nan kèk navigatè modèn, enprime ka orijinal.
Apati Safari v8.0, itilizasyon klas lajè fiks .containerla ka lakòz Safari sèvi ak yon gwosè font ki pa nòmal lè l ap enprime. Gade pwoblèm #14868 ak ensèk WebKit #138192 pou plis detay. Yon solisyon potansyèl se CSS sa a:
@media print {
.container {
width: auto;
}
}Soti nan bwat la, Android 4.1 (e menm kèk nouvo degaje aparamman) bato ak app Navigatè a kòm navigatè entènèt defo chwa (kontrèman ak Chrome). Malerezman, aplikasyon navigatè a gen anpil ensèk ak enkonsistans ak CSS an jeneral.
Sou <select>eleman, navigatè a stock android pa pral montre kontwòl yo bò si gen yon border-radiusak / oswa borderaplike. (Gade kesyon StackOverflow sa a pou plis detay.) Sèvi ak ti bout kòd ki anba a pou retire CSS ki ofanse a epi rann li <select>kòm yon eleman san stil sou navigatè stock Android a. Sniffing ajan itilizatè a evite entèferans ak navigatè Chrome, Safari ak Mozilla.
<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>Vle wè yon egzanp? Tcheke demonstrasyon JS Bin sa a.
Pou bay pi bon eksperyans posib pou navigatè fin vye granmoun ak buggy, Bootstrap itilize Hack navigatè CSS nan plizyè kote pou vize CSS espesyal nan vèsyon navigatè sèten yo nan lòd yo travay sou ensèk nan navigatè yo tèt yo. Antay sa yo konprann byen lakòz validateur CSS plenyen ke yo pa valab. Nan yon koup kote, nou itilize tou senyen-kwen CSS karakteristik ki poko konplètman estanda, men sa yo yo itilize piman pou amelyorasyon pwogresif.
Avètisman validation sa yo pa gen pwoblèm nan pratik, paske pòsyon ki pa piki nan CSS nou an konplètman valide epi pòsyon ki piki yo pa entèfere ak fonksyone apwopriye nan pòsyon ki pa piki a, kidonk poukisa nou fè espre inyore avètisman patikilye sa yo.
Menm jan an tou, dokiman HTML nou yo gen kèk avètisman sou validation HTML ki pa gen anpil valè akòz enklizyon nou genyen yon solisyon pou yon sèten ensèk Firefox .