Source

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.

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 N/A 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. Tā ir mūsu koda visstabilākā versija, un mūsu komanda to joprojām atbalsta kritisku kļūdu labojumu un dokumentācijas izmaiņu veikšanai. Tomēr jaunas funkcijas tam netiks pievienotas.

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 .

Š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 ir tieši jānoklikšķina uz nolaižamā 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ē nedraudošās 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 .