Pārlūkprogrammas un ierīces
Uzziniet par pārlūkprogrammām un ierīcēm, sākot no modernām līdz vecām, ko atbalsta Bootstrap, tostarp par katras zināmajām dīvainībām un kļūdām.
Atbalstītās pārlūkprogrammas
Bootstrap atbalsta visu galveno pārlūkprogrammu un platformu jaunākās, stabilās versijas . Operētājsistēmā Windows mēs atbalstām pārlūkprogrammu Internet Explorer 10-11/Microsoft Edge .
Alternatīvas pārlūkprogrammas, kurās tiek izmantota jaunākā WebKit, Blink vai Gecko versija, tieši vai ar platformas tīmekļa skata API starpniecību, netiek tieši atbalstītas. Tomēr Bootstrap vajadzētu (vairumā gadījumu) pareizi parādīt un darboties arī šajās pārlūkprogrammās. Tālāk ir sniegta precīzāka atbalsta informācija.
Mūsu atbalstīto pārlūkprogrammu klāstu un to versijas varat atrast mūsu vietnē.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
Mēs izmantojam Autoprefixer , lai apstrādātu paredzēto pārlūkprogrammas atbalstu, izmantojot CSS prefiksus, kas izmanto Browserslist , lai pārvaldītu šīs pārlūkprogrammas versijas. Skatiet viņu dokumentāciju, lai uzzinātu, kā integrēt šos rīkus savos projektos.
Mobilās ierīces
Vispārīgi runājot, Bootstrap atbalsta katras galvenās platformas noklusējuma pārlūkprogrammu jaunākās versijas. Ņemiet vērā, ka starpniekservera pārlūkprogrammas (piemēram, Opera Mini, Opera Mobile's Turbo režīms, UC Browser Mini, Amazon Silk) netiek atbalstītas.
| Chrome | Firefox | Safari | Android pārlūkprogramma un WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Atbalstīts | Atbalstīts | N/A | Atbalstīta Android v5.0+ | Atbalstīts |
| iOS | Atbalstīts | Atbalstīts | Atbalstīts | N/A | Atbalstīts |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Atbalstīts |
Galddatoru pārlūkprogrammas
Tāpat tiek atbalstītas lielākās daļas galddatoru pārlūkprogrammu jaunākās versijas.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Atbalstīts | Atbalstīts | N/A | Atbalstīts | Atbalstīts | Atbalstīts |
| Windows | Atbalstīts | Atbalstīts | Atbalstīts, IE10+ | Atbalstīts | Atbalstīts | Nav atbalstīts |
Firefox papildus jaunākajam parastajam stabilajam laidienam mēs atbalstām arī jaunāko Firefox paplašinātā atbalsta laidiena (ESR) versiju.
Neoficiāli Bootstrap vajadzētu izskatīties un darboties pietiekami labi pārlūkprogrammās Chromium un Chrome operētājsistēmai Linux, Firefox operētājsistēmai Linux un Internet Explorer 9, lai gan tās netiek oficiāli atbalstītas.
Lai iegūtu sarakstu ar dažām pārlūkprogrammas kļūdām, ar kurām Bootstrap ir jācīnās, skatiet mūsu pārlūkprogrammas kļūdu sienu .
Internet Explorer
Tiek atbalstīta pārlūkprogramma Internet Explorer 10+; IE9 un uz leju nav. Lūdzu, ņemiet vērā, ka daži CSS3 rekvizīti un HTML5 elementi netiek pilnībā atbalstīti IE10 vai tiem ir nepieciešami prefiksi rekvizīti, lai nodrošinātu pilnu funkcionalitāti. Apmeklējiet vietni Vai es varu izmantot… , lai iegūtu sīkāku informāciju par pārlūkprogrammas atbalstu CSS3 un HTML5 funkcijām. Ja jums ir nepieciešams IE8-9 atbalsts, izmantojiet Bootstrap 3.
Modāļi un nolaižamās izvēlnes mobilajās ierīcēs
Pārplūde un ritināšana
Elementa atbalsts overflow: hidden;ir <body>diezgan ierobežots operētājsistēmās iOS un Android. Šajā nolūkā, ritinot gar modāla augšdaļu vai apakšdaļu kādā no šo ierīču pārlūkprogrammām, <body>saturs sāks ritināt. Skatiet Chrome kļūdu #175502 (izlabota pārlūkprogrammā Chrome v40) un WebKit kļūdu #153852 .
iOS teksta lauki un ritināšana
Sākot ar operētājsistēmu iOS 9.2, kamēr modāls ir atvērts, ja ritināšanas žesta sākotnējais pieskāriens atrodas teksta <input>vai simbola robežās <textarea>, <body>tiks ritināts saturs zem modāla, nevis pats modāls. Skatiet WebKit kļūdu #153856 .
Navigācijas joslas nolaižamās izvēlnes
Šis .dropdown-backdropelements netiek izmantots operētājsistēmā iOS navigācijā z-indeksēšanas sarežģītības dēļ. Tādējādi, lai aizvērtu nolaižamās izvēlnes navigācijas joslās, jums tieši jānoklikšķina uz nolaižamās izvēlnes elementa (vai jebkura cita elementa, kas aktivizēs klikšķa notikumu operētājsistēmā iOS ).
Pārlūka tālummaiņa
Lapas tālummaiņa dažos komponentos neizbēgami rada renderēšanas artefaktus gan Bootstrap, gan pārējā tīmeklī. Atkarībā no problēmas, iespējams, varēsim to novērst (vispirms meklējiet un pēc tam atveriet problēmu, ja nepieciešams). Tomēr mums ir tendence tos ignorēt, jo tiem bieži vien nav tieša risinājuma, kā tikai sarežģīti risinājumi.
Lipīga :hover/ :focusoperētājsistēmā iOS
Lai gan :hovertas nav iespējams lielākajā daļā skārienierīču, iOS atdarina šo darbību, kā rezultātā tiek izveidoti “lipīgi” kursora virzīšanas stili, kas saglabājas arī pēc pieskaršanās vienam elementam. Šie kursora virzīšanas stili tiek noņemti tikai tad, kad lietotāji pieskaras citam elementam. Šī darbība tiek uzskatīta par lielākoties nevēlamu, un šķiet, ka tā nav problēma Android vai Windows ierīcēs.
Visā v4 alfa un beta laidienā mēs iekļāvām nepilnīgu un komentētu kodu, lai izvēlētos multivides vaicājumu starplikas, kas atspējotu virzīšanas stilus skārienekrāna ierīču pārlūkprogrammās, kas atdarina virzīšanu. Šis darbs nekad netika pilnībā pabeigts vai iespējots, taču, lai izvairītos no pilnīgas pārrāvuma, esam izvēlējušies šo starpliku novecot un saglabāt miksus kā īsinājumtaustiņus pseidoklasēm.
Drukāšana
Pat dažās modernās pārlūkprogrammās drukāšana var būt dīvaina.
Sākot ar Safari v8.0, fiksēta platuma .containerklases izmantošana var izraisīt Safari, drukājot neparasti mazu fonta izmēru. Plašāku informāciju skatiet izdevumā #14868 un WebKit kļūdu #138192 . Viens no iespējamiem risinājumiem ir šāds CSS:
@media print {
.container {
width: auto;
}
}
Android akciju pārlūks
Sākotnēji operētājsistēma Android 4.1 (un pat daži jaunāki laidieni, acīmredzot) tiek piegādāta ar pārlūkprogrammas lietotni kā noklusējuma tīmekļa pārlūkprogrammu (pretstatā Chrome). Diemžēl pārlūkprogrammas lietotnē ir daudz kļūdu un pretrunu ar CSS kopumā.
Izvēlieties izvēlni
Elementos <select>Android akciju pārlūkprogramma nerādīs sānu vadīklas, ja ir border-radiusun/vai borderlietotas. (Lai iegūtu sīkāku informāciju, skatiet šo StackOverflow jautājumu .) Izmantojiet tālāk norādīto koda fragmentu, lai noņemtu aizskarošo CSS un atveidotu <select>kā bez stila elementu Android akciju pārlūkprogrammā. Lietotāja aģenta šņaukšana novērš traucējumus pārlūkprogrammās Chrome, Safari un 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>
Vai vēlaties redzēt piemēru? Apskatiet šo JS Bin demonstrāciju .
Validatori
Lai nodrošinātu vislabāko iespējamo pieredzi vecām un kļūdainām pārlūkprogrammām, Bootstrap vairākās vietās izmanto CSS pārlūkprogrammu uzlaušanu , lai mērķētu uz īpašām CSS noteiktām pārlūkprogrammu versijām, lai novērstu kļūdas pašās pārlūkprogrammās. Šie uzlauzumi saprotami liek CSS pārbaudītājiem sūdzēties, ka tie ir nederīgi. Dažās vietās mēs izmantojam arī jaunākās CSS funkcijas, kas vēl nav pilnībā standartizētas, taču tās tiek izmantotas tikai pakāpeniskai uzlabošanai.
Šiem validācijas brīdinājumiem praksē nav nozīmes, jo mūsu CSS neuzlauztā daļa tiek pilnībā pārbaudīta, un uzlauztās daļas netraucē nehacked daļas pareizu darbību, tāpēc mēs apzināti ignorējam šos konkrētos brīdinājumus.
Mūsu HTML dokumentos ir arī daži triviāli un nenozīmīgi HTML validācijas brīdinājumi, jo esam iekļāvuši risinājumu noteiktai Firefox kļūdai .