ბრაუზერები და მოწყობილობები
შეიტყვეთ ბრაუზერებისა და მოწყობილობების შესახებ, თანამედროვედან ძველამდე, რომლებიც მხარდაჭერილია 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 | Safari | Android ბრაუზერი და ვებ ხედვა | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | მხარდაჭერილი | მხარდაჭერილი | N/A | მხარდაჭერილია Android v5.0+ | მხარდაჭერილი |
| iOS | მხარდაჭერილი | მხარდაჭერილი | მხარდაჭერილი | N/A | მხარდაჭერილი |
| Windows 10 მობილური | N/A | N/A | N/A | N/A | მხარდაჭერილი |
დესკტოპის ბრაუზერები
ანალოგიურად, მხარდაჭერილია დესკტოპის ბრაუზერების უმეტესობის უახლესი ვერსიები.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | ოპერა | Safari | |
|---|---|---|---|---|---|---|
| მაკი | მხარდაჭერილი | მხარდაჭერილი | N/A | მხარდაჭერილი | მხარდაჭერილი | მხარდაჭერილი |
| ფანჯრები | მხარდაჭერილი | მხარდაჭერილი | მხარდაჭერილი, IE10+ | მხარდაჭერილი | მხარდაჭერილი | Არ არის მხარდაჭერილი |
Firefox-ისთვის, უახლესი ნორმალური სტაბილური გამოშვების გარდა, ჩვენ ასევე მხარს ვუჭერთ Firefox-ის უახლეს გაფართოებული მხარდაჭერის გამოშვების (ESR) ვერსიას.
არაოფიციალურად, Bootstrap საკმარისად კარგად უნდა გამოიყურებოდეს და მოიქცეს Chromium-ში და Chrome-ში Linux-ისთვის, Firefox-ში Linux-ისთვის და Internet Explorer 9-ში, თუმცა ისინი ოფიციალურად არ არის მხარდაჭერილი.
ბრაუზერის ზოგიერთი ხარვეზის ჩამონათვალისთვის, რომელთანაც Bootstrap-ს უწევს გამკლავება, იხილეთ ჩვენი ბრაუზერის შეცდომების კედელი .
Internet Explorer
მხარდაჭერილია Internet Explorer 10+; IE9 და ქვემოთ არ არის. გთხოვთ გაითვალისწინოთ, რომ ზოგიერთი CSS3 თვისება და HTML5 ელემენტი სრულად არ არის მხარდაჭერილი IE10-ში, ან საჭიროებს პრეფიქსურ თვისებებს სრული ფუნქციონირებისთვის. CSS3 და HTML5 ფუნქციების ბრაუზერის მხარდაჭერის შესახებ დეტალებისთვის ეწვიეთ Can I use… . თუ გჭირდებათ IE8-9 მხარდაჭერა, გამოიყენეთ Bootstrap 3.
მოდალები და ჩამოსაშლელები მობილურზე
გადინება და გადახვევა
ელემენტის მხარდაჭერა საკმაოდ შეზღუდულია iOS-სა და Android-ში overflow: hidden;. <body>ამ მიზნით, როდესაც გადახვევთ მოდალის ზედა ან ქვედა მხარეს რომელიმე ამ მოწყობილობის ბრაუზერში, <body>შინაარსი დაიწყებს გადახვევას. იხილეთ Chrome ხარვეზი #175502 (დასწორებულია Chrome v40-ში) და WebKit შეცდომა #153852 .
iOS ტექსტური ველები და გადახვევა
iOS 9.2-დან, სანამ მოდალი ღიაა, თუ გადახვევის ჟესტის თავდაპირველი შეხება არის ტექსტის <input>ან ს საზღვრებში, მოდალის ქვეშ <textarea>არსებული <body>შინაარსი გადაინაცვლებს თავად მოდალის ნაცვლად. იხილეთ WebKit შეცდომა #153856 .
ნავიბარის ჩამოსაშლელები
ელემენტი არ გამოიყენება iOS- ზე .dropdown-backdropნავიში z-ინდექსირების სირთულის გამო. ამგვარად, ჩასაშლელი ფაილების დახურვისთვის, თქვენ პირდაპირ უნდა დააწკაპუნოთ ჩამოსაშლელ ელემენტზე (ან ნებისმიერ სხვა ელემენტზე, რომელიც გაუშვებს დაწკაპუნების მოვლენას iOS-ში ).
ბრაუზერის მასშტაბირება
გვერდის მასშტაბირება გარდაუვლად წარმოაჩენს არტეფაქტების რენდერირებას ზოგიერთ კომპონენტში, როგორც Bootstrap-ში, ასევე სხვა ქსელში. პრობლემის მიხედვით, ჩვენ შეგვიძლია მისი გამოსწორება (ჯერ მოძებნეთ და შემდეგ გახსენით პრობლემა, თუ საჭიროა). თუმცა, ჩვენ მიდრეკილნი ვართ უგულებელვყოთ ისინი, რადგან მათ ხშირად არ აქვთ პირდაპირი გამოსავალი, გარდა ჰაკიური გადაწყვეტილებებისა.
Sticky :hover/ :focusiOS-ზე
მიუხედავად იმისა , რომ :hoverეს შეუძლებელია უმეტეს სენსორულ მოწყობილობებზე, iOS ამსგავსებს ამ ქცევას, რის შედეგადაც წარმოიქმნება „წებოვანი“ ჰოვერის სტილი, რომელიც რჩება ერთ ელემენტზე შეხების შემდეგ. ჰოვერის ეს სტილები წაიშლება მხოლოდ მაშინ, როდესაც მომხმარებლები შეეხებიან სხვა ელემენტს. ეს ქცევა დიდწილად არასასურველად ითვლება და, როგორც ჩანს, პრობლემა არ არის Android ან Windows მოწყობილობებზე.
ჩვენი v4 ალფა და ბეტა გამოშვების განმავლობაში, ჩვენ შევიტანეთ არასრული და კომენტირებული კოდი მედიის მოთხოვნის შიმში მონაწილეობისთვის, რომელიც გამორთავს სენსორული მოწყობილობების ბრაუზერებში ჰოვერის სტილებს, რომლებიც ახდენენ ჰოვერირების ემულაციას. ეს ნამუშევარი არასდროს დასრულებულა ან ჩართულია, მაგრამ სრული გაფუჭების თავიდან ასაცილებლად, ჩვენ გადავწყვიტეთ ამ შიმების გაუქმება და მიქსების შენახვა, როგორც მალსახმობები ფსევდო-კლასებისთვის.
ბეჭდვა
ზოგიერთ თანამედროვე ბრაუზერშიც კი, ბეჭდვა შეიძლება იყოს უცნაური.
რაც შეეხება Safari v8.0-ს, ფიქსირებული სიგანის .containerკლასის გამოყენებამ შეიძლება გამოიწვიოს Safari-მ გამოიყენოს უჩვეულოდ მცირე შრიფტის ზომა ბეჭდვისას. იხილეთ საკითხი #14868 და WebKit შეცდომა #138192 დამატებითი დეტალებისთვის. ერთი პოტენციური გამოსავალი არის შემდეგი CSS:
@media print {
.container {
width: auto;
}
}
ანდროიდის საფონდო ბრაუზერი
გარეთ, Android 4.1 (და კიდევ უფრო ახალი რელიზები, როგორც ჩანს) მიეწოდება ბრაუზერის აპს, როგორც ნაგულისხმევი ვებ ბრაუზერის არჩევანს (Chrom-ისგან განსხვავებით). სამწუხაროდ, ბრაუზერის აპს აქვს ბევრი შეცდომა და შეუსაბამობა ზოგადად CSS-თან.
აირჩიეთ მენიუ
ელემენტებზე <select>Android-ის საფონდო ბრაუზერი არ აჩვენებს გვერდით კონტროლს, თუ არის border-radiusდა/ან borderგამოყენებული. (იხილეთ StackOverflow-ის ეს შეკითხვა დეტალებისთვის.) გამოიყენეთ ქვემოთ მოცემული კოდის ფრაგმენტი შეურაცხმყოფელი CSS- <select>ის ამოსაშლელად და გადაიყვანეთ როგორც unstyled ელემენტად Android stock ბრაუზერში. მომხმარებლის აგენტის sniffing თავიდან აიცილებს ჩარევას 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-ის გარკვეული ხარვეზის გამოსწორების გამო .