ბრაუზერები და მოწყობილობები
შეიტყვეთ ბრაუზერებისა და მოწყობილობების შესახებ, თანამედროვედან ძველამდე, რომლებიც მხარდაჭერილია Bootstrap-ის მიერ, მათ შორის თითოეულისთვის ცნობილი უცნაურობებისა და შეცდომების შესახებ.
Bootstrap მხარს უჭერს ყველა ძირითადი ბრაუზერის და პლატფორმის უახლეს, სტაბილურ გამოშვებას . Windows-ზე ჩვენ მხარს ვუჭერთ Internet Explorer 10-11 / Microsoft Edge-ს .
ალტერნატიული ბრაუზერები, რომლებიც იყენებენ WebKit-ის, Blink-ის ან Gecko-ს უახლეს ვერსიას, პირდაპირ თუ პლატფორმის ვებ ხედვის API-ს მეშვეობით, ცალსახად არ არის მხარდაჭერილი. თუმცა, Bootstrap უნდა (უმეტეს შემთხვევაში) აჩვენოს და სწორად ფუნქციონირებდეს ამ ბრაუზერებშიც. უფრო კონკრეტული მხარდაჭერის ინფორმაცია მოცემულია ქვემოთ.
ზოგადად რომ ვთქვათ, 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 დემო ვერსია.
ძველი და გაფუჭებული ბრაუზერებისთვის საუკეთესო გამოცდილების უზრუნველსაყოფად, Bootstrap იყენებს CSS ბრაუზერის ჰაკერებს რამდენიმე ადგილას, რათა დაამიზნოს სპეციალური CSS ბრაუზერის გარკვეულ ვერსიებზე, რათა მოაგვაროს შეცდომები თავად ბრაუზერებში. ეს ჰაკები გასაგებია, რომ CSS ვალიდატორები ჩივიან, რომ ისინი არასწორია. რამდენიმე ადგილას, ჩვენ ასევე ვიყენებთ სისხლდენის CSS ფუნქციებს, რომლებიც ჯერ კიდევ არ არის სრულად სტანდარტიზებული, მაგრამ ისინი გამოიყენება მხოლოდ პროგრესული გაუმჯობესებისთვის.
ამ ვალიდაციის გაფრთხილებებს პრაქტიკაში მნიშვნელობა არ აქვს, რადგან ჩვენი CSS-ის არაჰაკირებული ნაწილი სრულად ამოწმებს და ჰაკური ნაწილები არ ერევა არაჰაკირებული ნაწილის გამართულ ფუნქციონირებაში, ამიტომ ჩვენ განზრახ უგულებელყოფთ ამ კონკრეტულ გაფრთხილებებს.
ჩვენს HTML დოკუმენტებს ასევე აქვთ რამდენიმე ტრივიალური და არათანმიმდევრული HTML ვალიდაციის გაფრთხილებები Firefox-ის გარკვეული ხარვეზის გამოსწორების გამო .