Navegadores y dispositivos
Yachay maskaqkunamanta chaymanta dispositivokunamanta, kunan pachamanta mawk'akama, chaymanta Bootstrap yanapasqa, chaymanta riqsisqa quirks chaymanta pantaykuna sapakamapaq.
Bootstrap llapa hatun maskaqkuna chaymanta plataformakuna qhipa, takyasqa lluqsichiykunata yanapakun. Windows kaqpi, Internet Explorer 10-11 / Microsoft Edge kaqmanta yanapakuyku .
Huk maskaqkuna mayqinkunachus WebKit, Blink utaq Gecko qhipa kaq laya llamk'achinku, chiqalla utaq plataforma web qhaway API kaqnintakama, mana sut'i yanapasqachu kanku. Ichaqa, Bootstrap (aswan achka kutipi) kay maskaqkunapi allinta rikuchinan tiyan chaymanta llamk'anan tiyan chaymanta. Aswan sut'i yanapakuy willakuy uraypi qusqa kachkan.
Yanapasqa navegadorkunaykumanta chaymanta layakunaykumanta tariyta atikunki kayniykupipackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Autoprefixer kaqwan llamk'ayku munasqa maskaq yanapakuyta CSS ñawpaq simikuna kaqnintakama ruwanapaq, mayqinchus Browserslist llamk'achin kay maskana layakuna kamachinapaq. Qillqankuta qhaway imayna kay yanapakuykunata proyectoykikunaman hukllanaykipaq.
Hatun rimaypi, Bootstrap sapa hatun plataformapa ñawpaqmanta maskaqninkunap qhipa kaqninkunata yanapakun. Reparay proxy maskaqkuna (kayhina Opera Mini, Opera Mobile kaqpa Turbo ruwaynin, UC Navegador Mini, Amazon Silk) mana yanapasqachu.
| Chrome nisqa | Firefox nisqa | Safari nisqa | Android Navegador & Web nisqa qhaway | Microsoft Edge nisqa | |
|---|---|---|---|---|---|
| Android nisqa | Yanapasqa | Yanapasqa | N/A | Android v5.0+ yanapasqa | Yanapasqa |
| iOS nisqapi | Yanapasqa | Yanapasqa | Yanapasqa | N/A | Yanapasqa |
| Windows 10 Móvil nisqa | N/A | N/A | N/A | N/A | Yanapasqa |
Chaynallataq, aswan qhipa kaq layakuna aswan mesa maskaqkunamanta yanapasqa kanku.
| Chrome nisqa | Firefox nisqa | Internet nisqapi maskaq | Microsoft Edge nisqa | Opera | Safari nisqa | |
|---|---|---|---|---|---|---|
| Mac nisqa | Yanapasqa | Yanapasqa | N/A | N/A | Yanapasqa | Yanapasqa |
| Ventanakuna | Yanapasqa | Yanapasqa | Yanapasqa, IE10+ | Yanapasqa | Yanapasqa | Mana yanapasqachu |
Firefox kaqpaq, aswan qhipa normal takyasqa kacharisqamanta, yanapaykutaq qhipa Mast'arisqa Yanapakuy Kacharisqa (ESR) Firefox kaqmanta.
Mana oficial kaqpi, Bootstrap allinta qhawanan chaymanta ruwanan tiyan Chromium kaqpi chaymanta Chrome kaqpi Linux kaqpaq, Firefox kaqpi Linux kaqpaq chaymanta Internet Explorer 9 kaqpi, ichaqa mana oficial yanapasqachu kanku.
Huk lista wakin maskaq pantaykuna Bootstrap kaqwan maqanakunan tiyan, qhaway Perqayku maskaq pantaykuna .
Internet Explorer 10+ nisqa yanapasqa kachkan; IE9 y abajo no es. Ama hina kaspa, yachay wakin CSS3 kaqninkuna chaymanta HTML5 elementokuna mana hunt'asqa yanapasqachu IE10 kaqpi, utaq ñawpaqchasqa kaqninkunata hunt'a ruwanapaq munanku. Watukuy ¿Atiymanchu... CSS3 chaymanta HTML5 ruwanakuna maskaq yanapakuymanta sut'inchaykunapaq.
Sichus IE8-9 yanapakuyta munanki, Bootstrap 3 llamk'achiy.Kayqa aswan takyasqa laya codigoykumanta chaymanta kunankamapas equipoykuwan yanapasqa kachkan critico pantaykunata allichaypaq chaymanta qillqa tikraykunapaq. Ichaqa manan ima mosoq ruwaykunapas chayman yapakunqachu.
Yanapakuypaq elemento kaqpi allin limitasqa iOS kaqpi chaymanta Android kaqpi overflow: hidden;. <body>Chaypaq, mayk'aq huk modal patamanta utaq uraymanta mayqin chay dispositivokunap navegadorninpipas kuyuchinki, <body>contenido kuyuchiyta qallarinqa. Qaway Chrome pantay #175502 (Chrome v40 kaqpi allichasqa) chaymanta WebKit pantay #153852 .
<input>iOS 9.2 kaqmanta, huk modal kichasqa kachkaptin, sichus huk rollo gesto qallariy llamiy huk textual utaq huk kaqpa linderon ukhupi kachkan <textarea>, <body>modal urapi contenidoqa kikin modalpa rantinpi kuyuchisqa kanqa. WebKit pantay #153856 nisqapi qhaway .
Chay .dropdown-backdropelementoqa mana iOS kaqpi nav kaqpi llamk'achkanchu z-indexing kaqpa complejidadninrayku. Chayhina, navbars kaqpi urayk'aqkuna wichq'anapaq, chiqalla urayk'aq elementota ñit'inayki tiyan (utaq mayqin wak elemento kaqtapas mayqinchus iOS kaqpi huk ñit'iy ruwayta rawrachinqa ).
P'anqa hatunyachiy mana hark'asqa ruway artefactokunata wakin componentes kaqpi rikuchin, iskaynin Bootstrap kaqpi chaymanta wakin web kaqpi. Chay sasachakuyman hinaqa, ichapas allichayta atichwan (ñawpaqta maskay, chaymanta huk sasachakuyta kichay necesario kaqtin). Ichaqa, kaykunata mana qhawayta munayku imaynachus sapa kuti mana chiqa solucionniyuqchu kanku wak hacky allichaykunamanta.
Sichus :hovermana atikunchu aswan llachpana dispositivokunapi, iOS kay ruwayta qatipan, chaymanta “k’aspi” hover estilokuna ruwanku chaymanta huk elementota ñit’iymanta qhipaman qhipakunku. Kay hover estilokuna huk elementota ñit'iqtinkulla hurqusqa kanku. Kay ruwayqa aswan mana munasqa hina qhawasqa chaymanta mana huk sasachakuy hinachu rikukun Android utaq Windows dispositivokunapi.
Tukuy v4 alfa chaymanta beta lluqsichiyniykupi, mana hunt'asqa chaymanta comentarios hawa codigota huk medio tapuy shim kaqman akllanapaq churarqayku mayqinchus hover estilokunata mana llamk'achinmanchu llachpana dispositivo navegadores kaqpi mayqinkunachus hovering kaqmanta qatinku. Kay llamk'ayqa mana hayk'aqpas hunt'asqa tukusqachu utaq atichisqachu karqan, ichaqa mana hunt'asqa p'akisqa kananpaq, kay shim mana allinpaq qhawariyta akllarqayku chaymanta mixins nisqakunata pseudo-clases kaqpaq llalliq hina waqaychayta.
Kunan tiempopi wakin navegadorkunapipas imprimiyqa quirky kanman.
Safari v8.0 kaqmanta, takyasqa-ancho .containerclase llamk'achiyta Safari huk mana costumbre kaq uchuy letra sayayninta llamk'achiyta atin imprimiypi. Aswan willakuypaq qhaway #14868 kaqmanta chaymanta WebKit pantay #138192 kaqmanta. Huk llamkana atikuq kay CSS kaqmi:
@media print {
.container {
width: auto;
}
}Qutumanta hawa, Android 4.1 (hinallataq wakin musuq lluqsiykuna rikukuq hina) apachinku Navegador ruwanawan akllasqa web maskaq ñawpaqmanta hina (Chrome kaqmanta). Llakikuypaq, Navegador ruwana achka pantaykunayuq chaymanta mana tupaq CSS kaqwan tukuypaq.
Elementokunapi, Android <select>stock maskaq mana lado kamachiykunata rikuchinqachu sichus huk border-radiuschaymanta/utaq borderchurasqa. (Qhaway kay StackOverflow tapuyta sut'inchaykunapaq.) Uraypi codigomanta fragmentota llamk'achiy k'iriq CSS kaqmanta hurqunaykipaq chaymanta ruwayta kay <select>mana estiloyuq elemento hina Android stock maskaqpi. Ruwaq agente asnaynin Chrome, Safari chaymanta Mozilla maskaqkunawan hark'ayta harkan.
<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>¿Huk ejemplota qhawayta munankichu? Kay JS Bin demostracionta qhaway.
Aswan allin experienciata ñawpaq chaymanta pantasqa maskaqkunaman qunapaq, Bootstrap CSS maskaq hacks achka kitikunapi llamk'achin especial CSS wakin maskaq layakunaman maskanapaq kikin maskaqkunapi pantaykunata llamk'ananpaq. Kay hacks entiendenapaq hina CSS validadorkuna mana allin kasqankumanta quejakunankupaq ruwanku. Huk iskay kitikunapi, yawar-kantu CSS ruwanakunata llamk'achiykutaq manaraq hunt'asqa estandarizadachu, ichaqa kaykunaqa puramente ñawpaqman allinchaypaq llamk'achisqa kanku.
Kay chiqaqchay willakuykunaqa mana ruwaypi imapaqpaschu kanku chaymanta mana hacky kaq parte CSSniykumanta hunt'asqata chiqaqchanku chaymanta hacky rakikuna mana mana hacky kaqpa allin llamk'ayninta hark'ankuchu, chaymanta imarayku kay particular willaykunata deliberadamente mana qhawaykuchu.
HTML qillqaykupas wakin mana imapaq valeq chaymanta mana imapaqpas HTML chiqaqchay willakuyniyuq kanku huk Firefox pantaypaq huk allichay churasqaykurayku .