Source

Բրաուզերներ և սարքեր

Իմացեք բրաուզերների և սարքերի մասին՝ ժամանակակիցից մինչև հին, որոնք աջակցվում են Bootstrap-ի կողմից՝ ներառյալ հայտնի տարօրինակություններն ու սխալները յուրաքանչյուրի համար:

Աջակցվող բրաուզերներ

Bootstrap-ն աջակցում է բոլոր հիմնական բրաուզերների և հարթակների վերջին, կայուն թողարկումները : Windows-ում մենք աջակցում ենք Internet Explorer 10-11 / Microsoft Edge :

Այլընտրանքային բրաուզերները, որոնք օգտագործում են WebKit-ի, Blink-ի կամ Gecko-ի վերջին տարբերակը՝ ուղղակիորեն կամ հարթակի վեբ դիտման API-ի միջոցով, հստակորեն չեն աջակցվում: Այնուամենայնիվ, Bootstrap-ը (շատ դեպքերում) պետք է ցուցադրի և ճիշտ գործի նաև այս բրաուզերներում: Աջակցության ավելի կոնկրետ տեղեկատվությունը տրված է ստորև:

Դուք կարող եք գտնել մեր աջակցվող բրաուզերների տեսականին և դրանց տարբերակները մեր.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

Մենք օգտագործում ենք Autoprefixer- ը CSS նախածանցների միջոցով բրաուզերի նախատեսված աջակցությունը մշակելու համար, որն օգտագործում է Բրաուզերների ցուցակը՝ դիտարկիչի այս տարբերակները կառավարելու համար: Խորհրդակցեք նրանց փաստաթղթերին, թե ինչպես կարելի է ինտեգրել այս գործիքները ձեր նախագծերում:

Շարժական սարքեր

Ընդհանուր առմամբ, Bootstrap-ն աջակցում է յուրաքանչյուր հիմնական հարթակի լռելյայն բրաուզերների վերջին տարբերակները: Նկատի ունեցեք, որ պրոքսի բրաուզերները (օրինակ՝ Opera Mini, Opera Mobile's Turbo ռեժիմ, UC Browser Mini, Amazon Silk) չեն աջակցվում:

Chrome Firefox Սաֆարի Android զննարկիչ և վեբ դիտում Microsoft Edge
Android Աջակցված է Աջակցված է N/A Աջակցվում է Android v5.0+ Աջակցված է
iOS Աջակցված է Աջակցված է Աջակցված է N/A Աջակցված է
Windows 10 Mobile N/A N/A N/A N/A Աջակցված է

Սեղանի բրաուզերներ

Նմանապես, աշխատասեղանի բրաուզերների մեծ մասի վերջին տարբերակներն ապահովված են:

Chrome Firefox Internet Explorer Microsoft Edge Օպերա Սաֆարի
Mac Աջակցված է Աջակցված է N/A N/A Աջակցված է Աջակցված է
Windows Աջակցված է Աջակցված է Աջակցվում է, IE10+ Աջակցված է Աջակցված է Չի ապահովվում

Firefox-ի համար, ի լրումն վերջին նորմալ կայուն թողարկման, մենք նաև աջակցում ենք Firefox-ի վերջին Extended Support Release (ESR) տարբերակը:

Ոչ պաշտոնապես, Bootstrap-ը պետք է բավական լավ տեսք ունենա և իրեն պահի Chromium-ում և Chrome-ում Linux-ի համար, Firefox-ի համար Linux-ի և Internet Explorer 9-ի համար, թեև դրանք պաշտոնապես չեն աջակցվում:

Բրաուզերի որոշ վրիպակների ցանկի համար, որոնց հետ Bootstrap-ը պետք է բախվի, տես մեր բրաուզերի վրիպակների պատը :

Internet Explorer

Աջակցվում է Internet Explorer 10+; IE9 և ներքև չէ: Խնդրում ենք տեղյակ լինել, որ որոշ CSS3 հատկություններ և HTML5 տարրեր լիովին չեն աջակցվում IE10-ում կամ պահանջում են նախածանցային հատկություններ՝ լիարժեք գործունակության համար: CSS3 և HTML5 գործառույթների բրաուզերի աջակցության վերաբերյալ մանրամասների համար այցելեք Կարող եմ օգտագործել… : Եթե ​​Ձեզ անհրաժեշտ է IE8-9 աջակցություն, օգտագործեք Bootstrap 3:

Մոդալներ և բացվող ներդիրներ բջջայինի վրա

Հորդառատ և ոլորում

Տարրերի աջակցությունը բավականին սահմանափակ է iOS-ում և Android-ում overflow: hidden;: <body>Այդ նպատակով, երբ դուք ոլորեք մոդալի վերևի կամ ներքևի կողքով այդ սարքերից որևէ մեկի բրաուզերում, <body>բովանդակությունը կսկսի ոլորվել: Տե՛ս Chrome-ի թիվ 175502 սխալը (շտկվել է Chrome v40-ում) և WebKit սխալը՝ #153852 :

iOS տեքստային դաշտեր և ոլորում

iOS 9.2-ի դրությամբ, երբ մոդալը բաց է, եթե պտտվող ժեստի սկզբնական հպումը գտնվում է տեքստի <input>կամ a- ի սահմաններում <textarea>, մոդալի <body>տակի բովանդակությունը կշարժվի բուն մոդալի փոխարեն: Տես WebKit սխալ #153856 :

Տարրը .dropdown-backdropչի օգտագործվում iOS-ում նավի մեջ՝ z-ինդեքսավորման բարդության պատճառով: Այսպիսով, navbars-ում բացվող ցանկերը փակելու համար դուք պետք է ուղղակիորեն սեղմեք բացվող տարրը (կամ որևէ այլ տարր, որը կգործարկի սեղմման իրադարձություն iOS-ում ):

Բրաուզերի խոշորացում

Էջի խոշորացումն անխուսափելիորեն ներկայացնում է որոշ բաղադրիչների արտեֆակտներ, ինչպես Bootstrap-ում, այնպես էլ համացանցի մնացած մասում: Կախված խնդրից, մենք կարող ենք շտկել այն (նախ որոնեք, իսկ անհրաժեշտության դեպքում բացեք խնդիրը): Այնուամենայնիվ, մենք հակված ենք անտեսել դրանք, քանի որ դրանք հաճախ այլ ուղղակի լուծում չունեն, քան հաքերային լուծումները:

Կպչուն :hover/ :focusiOS-ում

Թեև :hoverդա հնարավոր չէ հպման սարքերի մեծ մասում, iOS-ն ընդօրինակում է այս վարքագիծը, ինչը հանգեցնում է սավառնող «կպչուն» ոճերի, որոնք պահպանվում են մեկ տարրը սեղմելուց հետո: Այս սավառնող ոճերը հեռացվում են միայն այն դեպքում, երբ օգտվողները հպում են մեկ այլ տարրի: Այս պահվածքը հիմնականում անցանկալի է համարվում և կարծես թե խնդիր չէ Android կամ Windows սարքերում:

Մեր v4 ալֆա և բետա թողարկումների ընթացքում մենք ներառել ենք թերի և մեկնաբանված ծածկագիր՝ մեդիա հարցումների շեմին ընտրելու համար, որը անջատելու է սավառնող ոճերը հպման սարքերի բրաուզերներում, որոնք նմանակում են սավառնումը: Այս աշխատանքը երբեք ամբողջությամբ չի ավարտվել կամ միացվել, բայց ամբողջական կոտրումից խուսափելու համար մենք որոշել ենք հնացել այս շեմը և պահել միքսները որպես կեղծ դասերի դյուրանցումներ:

Տպագրություն

Նույնիսկ որոշ ժամանակակից բրաուզերներում տպագրությունը կարող է տարօրինակ լինել:

Safari v8.0-ի դրությամբ, ֆիքսված լայնության .containerդասի օգտագործումը կարող է պատճառ դառնալ, որ Safari-ն տպելիս օգտագործի անսովոր փոքր տառաչափ: Լրացուցիչ մանրամասների համար տես թողարկում #14868 և WebKit սխալ #138192 : Հնարավոր լուծումներից մեկը հետևյալ CSS-ն է.

@media print {
  .container {
    width: auto;
  }
}

Android ֆոնդային բրաուզեր

Android 4.1-ը (և նույնիսկ որոշ նոր թողարկումներ, ըստ երևույթին) առաքվում է Browser հավելվածով որպես ընտրված լռելյայն վեբ դիտարկիչ (ի տարբերություն Chrome-ի): Ցավոք, Browser հավելվածն ունի բազմաթիվ սխալներ և անհամապատասխանություններ ընդհանուր առմամբ CSS-ի հետ:

Ընտրեք ընտրացանկը

Տարրերի վրա <select>Android ֆոնդային զննարկիչը չի ցուցադրի կողային հսկիչները, եթե կա border-radiusև/կամ borderկիրառվում է: (Մանրամասների համար տե՛ս StackOverflow-ի այս հարցը :) Օգտագործեք ստորև բերված կոդի հատվածը՝ վիրավորական CSS-ը հեռացնելու և <select>Android ֆոնդային բրաուզերի վրա որպես չոճավորված տարր վերածելու համար: Օգտվողի գործակալի հոտը խուսափում է Chrome, Safari և 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>

Ցանկանու՞մ եք օրինակ տեսնել: Ստուգեք այս JS Bin ցուցադրությունը :

Վավերացնողներ

Հին և խելագարված բրաուզերներին լավագույն հնարավոր փորձը ապահովելու համար Bootstrap-ը մի քանի վայրերում օգտագործում է CSS բրաուզերի հաքեր ՝ հատուկ CSS-ին թիրախավորելու բրաուզերի որոշակի տարբերակների համար, որպեսզի շտկվի բրաուզերների սխալները: Այս հաքերները հասկանալի է, որ CSS վավերացնողները բողոքում են, որ դրանք անվավեր են: Մի քանի վայրերում մենք նաև օգտագործում ենք արյունահոսող CSS գործառույթներ, որոնք դեռ լիովին ստանդարտացված չեն, բայց դրանք օգտագործվում են զուտ առաջադեմ բարելավման համար:

Այս վավերացման նախազգուշացումները գործնականում նշանակություն չունեն, քանի որ մեր CSS-ի ոչ հաքերային հատվածը լիովին վավերացվում է, և հաքի հատվածները չեն խանգարում ոչ հաքերային հատվածի պատշաճ աշխատանքին, հետևաբար ինչու ենք մենք միտումնավոր անտեսում այս հատուկ նախազգուշացումները:

Մեր HTML փաստաթղթերը նույնպես ունեն որոշ չնչին և անհետևանք HTML-ի վավերացման նախազգուշացումներ՝ կապված Firefox-ի որոշակի վրիպակի լուծումների ընդգրկման հետ :