Браузерлер мен құрылғылар
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
Осы браузер нұсқаларын басқару үшін Browserlist қолданбасын пайдаланатын CSS префикстері арқылы болжалды шолғыш қолдауын өңдеу үшін Autoprefixer пайдаланамыз. Бұл құралдарды жобаларыңызға қалай біріктіруге болатынын білу үшін олардың құжаттамасын қараңыз.
Мобильді құрылғылар
Жалпы айтқанда, Bootstrap әрбір негізгі платформаның әдепкі браузерлерінің соңғы нұсқаларын қолдайды. Прокси браузерлерге (мысалы, Opera Mini, Opera Mobile турбо режимі, UC Browser Mini, Amazon Silk) қолдау көрсетілмейтінін ескеріңіз.
| Chrome | Firefox | Сафари | Android шолғышы және WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Қолдау көрсетіледі | Қолдау көрсетіледі | Жоқ | Android v5.0+ қолдайды | Қолдау көрсетіледі |
| iOS | Қолдау көрсетіледі | Қолдау көрсетіледі | Қолдау көрсетіледі | Жоқ | Қолдау көрсетіледі |
| Windows 10 Mobile | Жоқ | Жоқ | Жоқ | Жоқ | Қолдау көрсетіледі |
Жұмыс үстелі браузерлері
Сол сияқты, көптеген жұмыс үстелі браузерлерінің соңғы нұсқаларына қолдау көрсетіледі.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Опера | Сафари | |
|---|---|---|---|---|---|---|
| Mac | Қолдау көрсетіледі | Қолдау көрсетіледі | Жоқ | Қолдау көрсетіледі | Қолдау көрсетіледі | Қолдау көрсетіледі |
| Windows | Қолдау көрсетіледі | Қолдау көрсетіледі | Қолдау көрсетіледі, IE10+ | Қолдау көрсетіледі | Қолдау көрсетіледі | Қолдау көрсетілмейді |
Firefox үшін ең соңғы қалыпты тұрақты шығарылымға қоса, біз Firefox-тың соңғы кеңейтілген қолдау релизі (ESR) нұсқасын да қолдаймыз.
Бейресми түрде Bootstrap Chromium және Linux жүйесіне арналған Chrome, Linux үшін Firefox және Internet Explorer 9 нұсқаларында жеткілікті түрде жақсы көрінуі және әрекет етуі керек, бірақ олар ресми түрде қолдау көрсетпейді.
Bootstrap шешуі керек кейбір шолғыш қателерінің тізімін көру үшін біздің браузер қателерінің қабырғасын қараңыз .
Internet Explorer
Internet Explorer 10+ нұсқасына қолдау көрсетіледі; IE9 және төмен емес. Кейбір CSS3 сипаттары мен HTML5 элементтеріне IE10 жүйесінде толық қолдау көрсетілмейтінін немесе толық функционалдылық үшін префиксті сипаттарды қажет ететінін ескеріңіз. CSS3 және HTML5 мүмкіндіктерін браузерге қолдау көрсету туралы толық ақпарат алу үшін Қолдануға болады ма… бөліміне өтіңіз. IE8-9 қолдауын қажет етсеңіз, Bootstrap 3 пайдаланыңыз.
Модалдар мен ұялы телефондағы ашылмалы тізімдер
Толып кету және айналдыру
Элементке қолдау overflow: hidden;iOS <body>және Android жүйелерінде өте шектеулі. Осы мақсатта, сол құрылғылардың браузерлерінің кез келгенінде модальдың жоғарғы немесе төменгі жағын жылжытқанда, <body>мазмұн айналдыра бастайды. Chrome қатесі №175502 ( Chrome v40 нұсқасында түзетілген) және WebKit қатесі #153852 қараңыз .
iOS мәтін өрістері және айналдыру
<input>IOS 9.2 нұсқасы бойынша, модаль ашық болған кезде, айналдыру қимылының бастапқы түртуі мәтіндік немесе a шекарасында болса <textarea>, <body>модальдың өзінің орнына модаль астындағы мазмұн айналдырылады. №153856 WebKit қатесін қараңыз .
Шарлау тақтасының ашылмалы тізімдері
Элемент .dropdown-backdropiOS жүйесінде z-индекстеу күрделілігіне байланысты навигацияда пайдаланылмайды. Осылайша, шарлау жолақтарындағы ашылмалы тізімдерді жабу үшін ашылмалы элементті (немесе 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 (тіпті кейбір жаңа шығарылымдар) Браузер қолданбасымен бірге таңдалған әдепкі веб-шолғыш ретінде жеткізіледі (Chrome-ға қарағанда). Өкінішке орай, Браузер қолданбасында көптеген қателер мен жалпы CSS-пен сәйкессіздіктер бар.
Мәзірді таңдаңыз
Элементтерде Android қор браузері және/немесе қолданылған <select>болса, бүйірлік басқару элементтерін көрсетпейді . (Мәліметтер алу үшін осы StackOverflow сұрағын қараңыз.) Төмендегі код үзіндісін ренжітетін CSS жою және Android қор шолғышында стильсіз элемент ретінде көрсету үшін пайдаланыңыз. Пайдаланушы агентінің иіскеуі Chrome, Safari және Mozilla браузерлеріне кедергі келтірмейді.border-radiusborder<select>
<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 құжаттарымызда белгілі бір Firefox қатесі үшін уақытша шешімді қосуымызға байланысты тривиальды және мәнсіз HTML тексеру ескертулері бар .