ბრაუზერები და მოწყობილობები
შეიტყვეთ ბრაუზერებისა და მოწყობილობების შესახებ, თანამედროვედან ძველამდე, რომლებიც მხარდაჭერილია Bootstrap-ის მიერ, მათ შორის თითოეულისთვის ცნობილი უცნაურობებისა და შეცდომების შესახებ.
Bootstrap მხარს უჭერს ყველა ძირითადი ბრაუზერის და პლატფორმის უახლეს, სტაბილურ გამოშვებას . Windows-ზე ჩვენ მხარს ვუჭერთ Internet Explorer 10-11 / Microsoft Edge-ს .
ალტერნატიული ბრაუზერები, რომლებიც იყენებენ WebKit-ის, Blink-ის ან Gecko-ს უახლეს ვერსიას, პირდაპირ თუ პლატფორმის ვებ ხედვის API-ს მეშვეობით, ცალსახად არ არის მხარდაჭერილი. თუმცა, Bootstrap უნდა (უმეტეს შემთხვევაში) აჩვენოს და სწორად ფუნქციონირებდეს ამ ბრაუზერებშიც. უფრო კონკრეტული მხარდაჭერის ინფორმაცია მოცემულია ქვემოთ.
თქვენ შეგიძლიათ იპოვოთ ჩვენი მხარდაჭერილი ბრაუზერების დიაპაზონი და მათი ვერსიები ჩვენს საიტზეpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"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 | N/A | მხარდაჭერილი | მხარდაჭერილი |
| ფანჯრები | მხარდაჭერილი | მხარდაჭერილი | მხარდაჭერილი, IE10+ | მხარდაჭერილი | მხარდაჭერილი | Არ არის მხარდაჭერილი |
Firefox-ისთვის, უახლესი ნორმალური სტაბილური გამოშვების გარდა, ჩვენ ასევე მხარს ვუჭერთ Firefox-ის უახლეს გაფართოებული მხარდაჭერის გამოშვების (ESR) ვერსიას.
არაოფიციალურად, Bootstrap უნდა გამოიყურებოდეს და კარგად მოიქცეს Chromium-სა და Chrome-ში Linux-ისთვის, Firefox-ში Linux-ისთვის და Internet Explorer 9-ში, თუმცა ისინი ოფიციალურად არ არის მხარდაჭერილი.
ბრაუზერის ზოგიერთი ხარვეზის ჩამონათვალისთვის, რომელთანაც Bootstrap-ს უწევს გამკლავება, იხილეთ ჩვენი ბრაუზერის შეცდომების კედელი .
მხარდაჭერილია 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 9.2-დან, სანამ მოდალი ღიაა, თუ გადახვევის ჟესტის თავდაპირველი შეხება არის ტექსტის <input>ან ს საზღვრებში, მოდალის ქვეშ <textarea>არსებული <body>შინაარსი გადაინაცვლებს თავად მოდალის ნაცვლად. იხილეთ WebKit შეცდომა #153856 .
ელემენტი არ გამოიყენება iOS- ზე .dropdown-backdropნავიში z-ინდექსირების სირთულის გამო. ამგვარად, ჩასაშლელი ფაილების დახურვისთვის, თქვენ პირდაპირ უნდა დააწკაპუნოთ ჩამოსაშლელ ელემენტზე (ან ნებისმიერ სხვა ელემენტზე, რომელიც გაუშვებს დაწკაპუნების მოვლენას iOS-ში ).
გვერდის მასშტაბირება გარდაუვლად წარმოაჩენს არტეფაქტების რენდერირებას ზოგიერთ კომპონენტში, როგორც Bootstrap-ში, ასევე სხვა ქსელში. პრობლემის მიხედვით, ჩვენ შეგვიძლია მისი გამოსწორება (ჯერ მოძებნეთ და შემდეგ გახსენით პრობლემა, თუ საჭიროა). თუმცა, ჩვენ მიდრეკილნი ვართ უგულებელვყოთ ისინი, რადგან მათ ხშირად არ აქვთ პირდაპირი გამოსავალი, გარდა ჰაკიური გადაწყვეტილებებისა.
მიუხედავად იმისა , რომ :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 დემო ვერსია.
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.
These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
ჩვენს HTML დოკუმენტებს ასევე აქვთ რამდენიმე ტრივიალური და არათანმიმდევრული HTML ვალიდაციის გაფრთხილებები Firefox-ის გარკვეული ხარვეზის გამოსწორების გამო .