Brauzerlar va qurilmalar
Bootstrap tomonidan qo'llab-quvvatlanadigan zamonaviydan eskigacha bo'lgan brauzerlar va qurilmalar, jumladan, har biri uchun ma'lum nosozliklar va xatolar haqida bilib oling.
Qo'llab-quvvatlanadigan brauzerlar
Bootstrap barcha asosiy brauzerlar va platformalarning so'nggi, barqaror versiyalarini qo'llab-quvvatlaydi. Windows-da biz Internet Explorer 10-11 / Microsoft Edge-ni qo'llab-quvvatlaymiz .
To‘g‘ridan-to‘g‘ri yoki platformaning veb-ko‘rish API’si orqali WebKit, Blink yoki Gecko’ning so‘nggi versiyasidan foydalanadigan muqobil brauzerlar aniq qo‘llab-quvvatlanmaydi. Biroq, Bootstrap (ko'p hollarda) ushbu brauzerlarda ham to'g'ri ko'rsatilishi va ishlashi kerak. Qo'llab-quvvatlash haqida batafsil ma'lumot quyida keltirilgan.
Siz bizning qo'llab-quvvatlanadigan brauzerlar qatorini va ularning versiyalarini bizning.browserslistrc file sahifamizda topishingiz mumkin :
# 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
Biz ushbu brauzer versiyalarini boshqarish uchun Brauzerlar ro'yxatidan foydalanadigan CSS prefikslari orqali mo'ljallangan brauzer yordamini boshqarish uchun Autoprefixerdan foydalanamiz. Ushbu vositalarni loyihalaringizga qanday integratsiya qilish uchun ularning hujjatlariga murojaat qiling.
Mobil qurilmalar
Umuman olganda, Bootstrap har bir asosiy platformaning standart brauzerlarining so'nggi versiyalarini qo'llab-quvvatlaydi. Esda tutingki, proksi-brauzerlar (masalan, Opera Mini, Opera Mobile-ning Turbo rejimi, UC Browser Mini, Amazon Silk) qo'llab-quvvatlanmaydi.
| Chrome | Firefox | Safari | Android brauzeri va WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Yoʻq | Android v5.0+ qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi |
| iOS | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Yoʻq | Qo'llab-quvvatlanadi |
| Windows 10 Mobile | Yoʻq | Yoʻq | Yoʻq | Yoʻq | Qo'llab-quvvatlanadi |
Ish stoli brauzerlari
Xuddi shunday, ko'pgina ish stoli brauzerlarining so'nggi versiyalari qo'llab-quvvatlanadi.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Yoʻq | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi |
| Windows | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi, IE10+ | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanadi | Qo'llab-quvvatlanmaydi |
Firefox uchun, eng so'nggi oddiy barqaror versiyaga qo'shimcha ravishda, biz Firefox-ning so'nggi Kengaytirilgan Yordam Relizi (ESR) versiyasini ham qo'llab-quvvatlaymiz.
Norasmiy ravishda, Bootstrap Chromium va Linux uchun Chrome, Linux uchun Firefox va Internet Explorer 9 da yaxshi ko'rinishi va o'zini tutishi kerak, ammo ular rasman qo'llab-quvvatlanmaydi.
Bootstrap bilan kurashishi kerak bo'lgan ba'zi brauzer xatolarining ro'yxatini Brauzer xatoliklari devoriga qarang .
Internet Explorer
Internet Explorer 10+ qo'llab-quvvatlanadi; IE9 va undan past emas. Shuni yodda tutingki, ba'zi CSS3 xususiyatlari va HTML5 elementlari IE10 da to'liq qo'llab-quvvatlanmaydi yoki to'liq funksionallik uchun prefiksli xususiyatlar talab qilinadi. Brauzerning CSS3 va HTML5 funksiyalarini qo‘llab-quvvatlash bo‘yicha batafsil ma’lumot uchun “Ishlab olamanmi… ” sahifasiga tashrif buyuring . Agar sizga IE8-9 yordami kerak bo'lsa, Bootstrap 3 dan foydalaning.
Mobilda modal va ochiladigan menyular
To'ldirish va aylantirish
Elementni qo'llab-quvvatlash overflow: hidden;iOS <body>va Android-da juda cheklangan. Shu maqsadda, ushbu qurilmalar brauzerlaridan birida modalning yuqori yoki pastki qismidan o‘tsangiz, <body>kontent aylana boshlaydi. Chrome xato #175502 ( Chrome v40 da tuzatilgan) va WebKit xatosi #153852 ga qarang .
iOS matn maydonlari va aylantirish
<input>IOS 9.2 dan boshlab, modal ochiq bo'lsa, aylantirish imo-ishorasining dastlabki teginishi matn yoki a chegarasida bo'lsa <textarea>, <body>modalning o'zi o'rniga modal ostidagi tarkib aylantiriladi. 153856-sonli WebKit xatosiga qarang .
Navbarning ochiladigan menyusi
Element .dropdown-backdropz-indekslashning murakkabligi tufayli iOS-da navlarda ishlatilmaydi. Shunday qilib, navigatsiya panelidagi ochiladigan menyularni yopish uchun siz to'g'ridan-to'g'ri ochiladigan elementni (yoki iOS-da bosish hodisasini ishga tushiradigan boshqa elementni ) bosishingiz kerak.
Brauzerni kattalashtirish
Sahifani kattalashtirish muqarrar ravishda Bootstrap-da ham, Internetning qolgan qismlarida ham ba'zi komponentlarda renderlash artefaktlarini taqdim etadi. Muammoga qarab, biz uni hal qilishimiz mumkin (avval qidiring va kerak bo'lsa, muammoni oching). Biroq, biz ularni e'tiborsiz qoldiramiz, chunki ular ko'pincha noto'g'ri vaqtinchalik echimlardan boshqa to'g'ridan-to'g'ri echimga ega emas.
Yopishqoq :hover/ :focusiOS-da
Ko'pgina :hoversensorli qurilmalarda bu mumkin bo'lmasa-da, iOS bu xatti-harakatni taqlid qiladi, natijada bitta elementni bosgandan keyin ham davom etadigan "yopishqoq" hover uslublari paydo bo'ladi. Ushbu kursor uslublari faqat foydalanuvchilar boshqa elementga tegsalar olib tashlanadi. Bu xatti-harakat asosan istalmagan deb hisoblanadi va Android yoki Windows qurilmalarida muammo emas.
Bizning v4 alfa va beta versiyalarimiz davomida biz sensorli qurilma brauzerlarida sichqonchani ko‘tarish uslublarini o‘chirib qo‘yadigan media so‘rovlar paneliga kirish uchun to‘liq bo‘lmagan va sharhlangan kodni kiritdik. Bu ish hech qachon toʻliq bajarilmagan yoki yoqilmagan, lekin toʻliq buzilmasligi uchun biz bu shimni bekor qilishni va miksinlarni psevdo-sinflar uchun yorliq sifatida saqlashni tanladik.
Chop etish
Hatto ba'zi zamonaviy brauzerlarda ham chop etish g'alati bo'lishi mumkin.
Safari v8.0 versiyasiga ko'ra, qattiq kenglik .containersinfidan foydalanish Safari chop etishda juda kichik shrift o'lchamidan foydalanishiga olib kelishi mumkin. Batafsil ma'lumot uchun #14868-son va WebKit xatosi #138192- ga qarang. Mumkin bo'lgan vaqtinchalik echimlardan biri bu quyidagi CSS:
@media print {
.container {
width: auto;
}
}
Android fond brauzeri
Qutiga Android 4.1 (va hatto ba'zi yangi versiyalar) Brauzer ilovasi bilan tanlagan standart veb-brauzer sifatida (Chrome'dan farqli o'laroq) yetkazib beriladi. Afsuski, Brauzer ilovasida juda ko'p xatolar va umuman CSS bilan nomuvofiqliklar mavjud.
Menyuni tanlang
Elementlarda Android fond brauzeri va/yoki qo'llanilsa <select>, yon boshqaruv elementlarini ko'rsatmaydi . ( Tafsilotlar uchun ushbu StackOverflow savoliga qarang.) Quyidagi kod parchasidan foydalanib, haqoratli CSS-ni olib tashlang va Android birja brauzerida uslubsiz element sifatida ko'rsating. Foydalanuvchi agentining hidlashi Chrome, Safari va Mozilla brauzerlari bilan aralashishdan qochadi.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>
Misol ko'rishni xohlaysizmi? Ushbu JS Bin demosini tekshiring .
Tasdiqlovchilar
Eski va noto'g'ri brauzerlar uchun eng yaxshi tajribani taqdim etish uchun Bootstrap brauzerlarning o'zlarida xatolarni bartaraf etish uchun muayyan brauzer versiyalariga maxsus CSS-ni yo'naltirish uchun bir necha joylarda CSS brauzerini buzishlardan foydalanadi. Ushbu buzg'unchiliklar CSS validatorlarining noto'g'ri ekanligi haqida shikoyat qilishlariga sabab bo'lishi mumkin. Baʼzi joylarda biz hali toʻliq standartlashtirilmagan CSS xususiyatlaridan ham foydalanamiz, lekin ular faqat progressiv yaxshilash uchun ishlatiladi.
Ushbu tasdiqlash ogohlantirishlari amalda muhim emas, chunki bizning CSS-ning noto'g'ri bo'lgan qismi to'liq tasdiqlanadi va buzilgan bo'limlar noto'g'ri bo'lgan qismning to'g'ri ishlashiga xalaqit bermaydi, shuning uchun biz ushbu maxsus ogohlantirishlarni ataylab e'tiborsiz qoldiramiz.
Bizning HTML hujjatlarida ham ba'zi bir ahamiyatsiz va ahamiyatsiz HTML tekshiruvi ogohlantirishlari mavjud, chunki biz ma'lum bir Firefox xatosi uchun vaqtinchalik yechimni kiritganmiz .