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.
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 bizningpackage.json sahifamizda topishingiz mumkin :
"browserslist": [
"last 1 major version",
">= 1%",
"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.
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 |
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 | Yoʻq | 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 Linux uchun Chromium va 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 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 prefiks xususiyatlarni talab qiladi. Brauzerning CSS3 va HTML5 funksiyalarini qo‘llab-quvvatlash bo‘yicha batafsil ma’lumot uchun “Ishlab olamanmi… ” sahifasiga tashrif buyuring .
Agar sizga IE8-9 qo‘llab-quvvatlashi kerak bo‘lsa, Bootstrap 3 dan foydalaning. Bu kodimizning eng barqaror versiyasi bo‘lib, muhim xatoliklar va hujjatlardagi o‘zgarishlar uchun jamoamiz tomonidan qo‘llab-quvvatlanadi. Biroq, unga hech qanday yangi xususiyatlar qo'shilmaydi.
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 .
<input>IOS 9.2 dan boshlab, modal ochiq bo'lsa, aylantirish imo-ishorasining dastlabki teginishi matn yoki a chegarasida bo'lsa, <textarea>modalning <body>o'rniga modal ostidagi tarkib aylantiriladi. WebKit xatosi # 153856 ga qarang .
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.
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.
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-harakatlar 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.
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;
}
}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.
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 agenti hidlash Chrome, Safari va Mozilla brauzerlari bilan aralashuvdan 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.
Eski va noto'g'ri brauzerlar uchun eng yaxshi tajribani taqdim etish uchun Bootstrap brauzerlarning o'zlarida xatolarni hal qilish uchun ba'zi brauzer versiyalariga maxsus CSS-ni yo'naltirish uchun bir necha joylarda CSS brauzerini buzishdan 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 eng zamonaviy CSS funksiyalaridan 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 bu 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 .