Mga browser at device
Matuto tungkol sa mga browser at device, mula moderno hanggang luma, na sinusuportahan ng Bootstrap, kasama ang mga kilalang quirk at bug para sa bawat isa.
Mga sinusuportahang browser
Sinusuportahan ng Bootstrap ang pinakabago, matatag na release ng lahat ng pangunahing browser at platform. Sa Windows, sinusuportahan namin ang Internet Explorer 10-11 / Microsoft Edge .
Ang mga alternatibong browser na gumagamit ng pinakabagong bersyon ng WebKit, Blink, o Tuko, direkta man o sa pamamagitan ng web view API ng platform, ay hindi tahasang sinusuportahan. Gayunpaman, ang Bootstrap ay dapat (sa karamihan ng mga kaso) na magpakita at gumana nang tama sa mga browser na ito. Ang mas tiyak na impormasyon ng suporta ay ibinigay sa ibaba.
Mahahanap mo ang aming sinusuportahang hanay ng mga browser at ang kanilang mga bersyon sa aming.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
Ginagamit namin ang Autoprefixer upang pangasiwaan ang nilalayong suporta sa browser sa pamamagitan ng mga prefix ng CSS, na gumagamit ng Browserslist upang pamahalaan ang mga bersyon ng browser na ito. Kumonsulta sa kanilang dokumentasyon para sa kung paano isama ang mga tool na ito sa iyong mga proyekto.
Mga mobile device
Sa pangkalahatan, sinusuportahan ng Bootstrap ang pinakabagong mga bersyon ng mga default na browser ng bawat pangunahing platform. Tandaan na ang mga proxy browser (gaya ng Opera Mini, Turbo mode ng Opera Mobile, UC Browser Mini, Amazon Silk) ay hindi suportado.
| Chrome | Firefox | Safari | Android Browser at WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Sinusuportahan | Sinusuportahan | N/A | Sinusuportahan ang Android v5.0+ | Sinusuportahan |
| iOS | Sinusuportahan | Sinusuportahan | Sinusuportahan | N/A | Sinusuportahan |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Sinusuportahan |
Mga desktop browser
Katulad nito, sinusuportahan ang mga pinakabagong bersyon ng karamihan sa mga desktop browser.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Sinusuportahan | Sinusuportahan | N/A | Sinusuportahan | Sinusuportahan | Sinusuportahan |
| Windows | Sinusuportahan | Sinusuportahan | Sinusuportahan, IE10+ | Sinusuportahan | Sinusuportahan | Hindi suportado |
Para sa Firefox, bilang karagdagan sa pinakabagong normal na stable na release, sinusuportahan din namin ang pinakabagong Extended Support Release (ESR) na bersyon ng Firefox.
Sa hindi opisyal na paraan, ang Bootstrap ay dapat magmukhang at kumilos nang maayos sa Chromium at Chrome para sa Linux, Firefox para sa Linux, at Internet Explorer 9, kahit na hindi sila opisyal na suportado.
Para sa isang listahan ng ilan sa mga browser bug na kailangang harapin ng Bootstrap, tingnan ang aming Wall of browser bugs .
Internet Explorer
Ang Internet Explorer 10+ ay suportado; IE9 at pababa ay hindi. Pakitandaan na ang ilang CSS3 property at HTML5 na elemento ay hindi ganap na sinusuportahan sa IE10, o nangangailangan ng mga prefix na property para sa buong functionality. Bisitahin ang Magagamit ko ba... para sa mga detalye sa suporta ng browser ng mga feature ng CSS3 at HTML5. Kung kailangan mo ng suporta sa IE8-9, gamitin ang Bootstrap 3.
Mga modal at dropdown sa mobile
Overflow at pag-scroll
Ang suporta para overflow: hidden;sa <body>elemento ay medyo limitado sa iOS at Android. Sa layuning iyon, kapag nag-scroll ka sa itaas o ibaba ng isang modal sa alinman sa mga browser ng mga device na iyon, <body>magsisimulang mag-scroll ang content. Tingnan ang Chrome bug #175502 (naayos sa Chrome v40) at WebKit bug #153852 .
iOS text field at pag-scroll
Simula sa iOS 9.2, habang bukas ang isang modal, kung ang paunang pagpindot ng isang galaw ng pag-scroll ay nasa loob ng hangganan ng isang textual <input>o isang <textarea>, ang <body>nilalaman sa ilalim ng modal ay mai-scroll sa halip na ang modal mismo. Tingnan ang WebKit bug #153856 .
Mga Dropdown ng Navbar
Hindi ginagamit ang .dropdown-backdropelemento sa iOS sa nav dahil sa pagiging kumplikado ng z-indexing. Kaya, upang isara ang mga dropdown sa mga navbar, dapat mong direktang i-click ang dropdown na elemento (o anumang iba pang elemento na magpapagana ng kaganapan sa pag-click sa iOS ).
Pag-zoom ng browser
Ang pag-zoom ng page ay hindi maiiwasang magpapakita ng mga artifact sa pag-render sa ilang bahagi, sa Bootstrap at sa iba pang bahagi ng web. Depende sa isyu, maaari naming ayusin ito (maghanap muna at pagkatapos ay magbukas ng isyu kung kinakailangan). Gayunpaman, madalas naming balewalain ang mga ito dahil madalas silang walang direktang solusyon maliban sa mga hacky na workaround.
Malagkit :hover/ :focussa iOS
Bagama't :hoverhindi posible sa karamihan ng mga touch device, ginagaya ng iOS ang gawi na ito, na nagreresulta sa mga "sticky" na estilo ng hover na nagpapatuloy pagkatapos mag-tap sa isang elemento. Aalisin lang ang mga istilong ito ng hover kapag nag-tap ang mga user ng isa pang elemento. Ang pag-uugali na ito ay itinuturing na hindi kanais-nais at mukhang hindi isang isyu sa mga Android o Windows device.
Sa kabuuan ng aming v4 alpha at beta release, isinama namin ang hindi kumpleto at nagkomento ng code para sa pag-opt in sa isang media query shim na magdi-disable ng mga istilo ng pag-hover sa mga browser ng touch device na tumutulad sa pag-hover. Ang gawaing ito ay hindi kailanman ganap na nakumpleto o pinagana, ngunit upang maiwasan ang kumpletong pagkasira, pinili naming huwag gamitin ang shim na ito at panatilihin ang mga mixin bilang mga shortcut para sa mga pseudo-class.
Pagpi-print
Kahit na sa ilang modernong browser, ang pag-print ay maaaring kakaiba.
Mula sa Safari v8.0, ang paggamit ng fixed-width na .containerklase ay maaaring maging sanhi ng Safari na gumamit ng hindi karaniwang maliit na laki ng font kapag nagpi-print. Tingnan ang isyu #14868 at WebKit bug #138192 para sa higit pang mga detalye. Ang isang potensyal na solusyon ay ang sumusunod na CSS:
@media print {
.container {
width: auto;
}
}
Android stock browser
Sa labas ng kahon, ang Android 4.1 (at tila ilang mas bagong release) ay ipinapadala kasama ang Browser app bilang default na web browser na pinili (kumpara sa Chrome). Sa kasamaang palad, ang Browser app ay may maraming mga bug at hindi pagkakatugma sa CSS sa pangkalahatan.
Pumili ng menu
Sa <select>mga elemento, hindi ipapakita ng Android stock browser ang mga side control kung mayroong border-radiusat/o borderinilapat. (Tingnan ang tanong na ito sa StackOverflow para sa mga detalye.) Gamitin ang snippet ng code sa ibaba upang alisin ang nakakasakit na CSS at i-render ang <select>bilang isang hindi naka-istilong elemento sa Android stock browser. Iniiwasan ng pagsinghot ng user agent ang panghihimasok sa mga browser ng Chrome, Safari, at 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>
Gustong makakita ng halimbawa? Tingnan ang JS Bin demo na ito .
Mga validator
Upang makapagbigay ng pinakamahusay na posibleng karanasan sa mga luma at maraming buggy na browser, gumagamit ang Bootstrap ng mga hack ng browser ng CSS sa ilang lugar upang i-target ang espesyal na CSS sa ilang bersyon ng browser upang malutas ang mga bug sa mga browser mismo. Ang mga hack na ito ay maliwanag na nagiging sanhi ng mga validator ng CSS na magreklamo na sila ay hindi wasto. Sa ilang lugar, gumagamit din kami ng bleeding-edge na mga feature ng CSS na hindi pa ganap na na-standardize, ngunit ginagamit lamang ang mga ito para sa progresibong pagpapahusay.
Ang mga babala sa pagpapatunay na ito ay hindi mahalaga sa pagsasanay dahil ang hindi-hacky na bahagi ng aming CSS ay ganap na nagpapatunay at ang mga na-hack na bahagi ay hindi nakakasagabal sa wastong paggana ng hindi-hacky na bahagi, kaya kung bakit namin sinasadya ang mga partikular na babalang ito.
Ang aming mga HTML docs ay mayroon ding ilang maliit at walang kabuluhang mga babala sa pagpapatunay ng HTML dahil sa aming pagsasama ng isang solusyon para sa isang partikular na bug sa Firefox .