ब्राउज़र और डिवाइस
आधुनिक से लेकर पुराने तक के ब्राउज़र और उपकरणों के बारे में जानें, जो बूटस्ट्रैप द्वारा समर्थित हैं, जिनमें प्रत्येक के लिए ज्ञात विचित्रताएं और बग शामिल हैं।
समर्थित ब्राउज़र
बूटस्ट्रैप सभी प्रमुख ब्राउज़रों और प्लेटफार्मों की नवीनतम, स्थिर रिलीज़ का समर्थन करता है। विंडोज़ पर, हम इंटरनेट एक्सप्लोरर 10-11 / माइक्रोसॉफ्ट एज का समर्थन करते हैं ।
वैकल्पिक ब्राउज़र जो वेबकिट, ब्लिंक, या गेको के नवीनतम संस्करण का उपयोग करते हैं, चाहे सीधे या प्लेटफॉर्म के वेब व्यू एपीआई के माध्यम से, स्पष्ट रूप से समर्थित नहीं हैं। हालाँकि, बूटस्ट्रैप को (ज्यादातर मामलों में) इन ब्राउज़रों में भी सही ढंग से प्रदर्शित और कार्य करना चाहिए। अधिक विशिष्ट समर्थन जानकारी नीचे दी गई है।
आप हमारे ब्राउज़रों और उनके संस्करणों की हमारी समर्थित श्रेणी को हमारे में पा सकते हैं.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
हम CSS उपसर्गों के माध्यम से इच्छित ब्राउज़र समर्थन को संभालने के लिए Autoprefixer का उपयोग करते हैं, जो इन ब्राउज़र संस्करणों को प्रबंधित करने के लिए Browserslist का उपयोग करता है। इन उपकरणों को अपनी परियोजनाओं में कैसे एकीकृत करें, इसके लिए उनके दस्तावेज़ देखें।
मोबाइल उपकरणों
सामान्यतया, बूटस्ट्रैप प्रत्येक प्रमुख प्लेटफ़ॉर्म के डिफ़ॉल्ट ब्राउज़र के नवीनतम संस्करणों का समर्थन करता है। ध्यान दें कि प्रॉक्सी ब्राउज़र (जैसे ओपेरा मिनी, ओपेरा मोबाइल का टर्बो मोड, यूसी ब्राउज़र मिनी, अमेज़ॅन सिल्क) समर्थित नहीं हैं।
| क्रोम | फ़ायर्फ़ॉक्स | सफारी | Android ब्राउज़र और वेबव्यू | माइक्रोसॉफ्ट बढ़त | |
|---|---|---|---|---|---|
| एंड्रॉयड | समर्थित | समर्थित | एन/ए | एंड्रॉइड v5.0+ समर्थित | समर्थित |
| आईओएस | समर्थित | समर्थित | समर्थित | एन/ए | समर्थित |
| विंडोज 10 मोबाइल | एन/ए | एन/ए | एन/ए | एन/ए | समर्थित |
डेस्कटॉप ब्राउज़र
इसी तरह, अधिकांश डेस्कटॉप ब्राउज़र के नवीनतम संस्करण समर्थित हैं।
| क्रोम | फ़ायर्फ़ॉक्स | इंटरनेट एक्स्प्लोरर | माइक्रोसॉफ्ट बढ़त | ओपेरा | सफारी | |
|---|---|---|---|---|---|---|
| Mac | समर्थित | समर्थित | एन/ए | समर्थित | समर्थित | समर्थित |
| खिड़कियाँ | समर्थित | समर्थित | समर्थित, IE10+ | समर्थित | समर्थित | समर्थित नहीं |
फ़ायरफ़ॉक्स के लिए, नवीनतम सामान्य स्थिर रिलीज़ के अलावा, हम फ़ायरफ़ॉक्स के नवीनतम विस्तारित समर्थन रिलीज़ (ESR) संस्करण का भी समर्थन करते हैं।
अनौपचारिक रूप से, बूटस्ट्रैप को क्रोमियम और लिनक्स के लिए क्रोम, लिनक्स के लिए फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर 9 में पर्याप्त रूप से दिखना और व्यवहार करना चाहिए, हालांकि वे आधिकारिक तौर पर समर्थित नहीं हैं।
कुछ ब्राउज़र बगों की सूची के लिए जिनसे बूटस्ट्रैप को जूझना पड़ता है, हमारे वॉल ऑफ़ ब्राउजर बग्स देखें ।
इंटरनेट एक्स्प्लोरर
इंटरनेट एक्सप्लोरर 10+ समर्थित है; IE9 और नीचे नहीं है। कृपया ध्यान रखें कि कुछ CSS3 गुण और HTML5 तत्व IE10 में पूरी तरह से समर्थित नहीं हैं, या पूर्ण कार्यक्षमता के लिए प्रीफ़िक्स्ड गुणों की आवश्यकता होती है। CSS3 और HTML5 सुविधाओं के ब्राउज़र समर्थन के विवरण के लिए क्या मैं उपयोग कर सकता हूं... पर जाएं । यदि आपको IE8-9 समर्थन की आवश्यकता है, तो बूटस्ट्रैप 3 का उपयोग करें।
मोबाइल पर मॉडल और ड्रॉपडाउन
अतिप्रवाह और स्क्रॉलिंग
overflow: hidden;तत्व के लिए समर्थन <body>आईओएस और एंड्रॉइड में काफी सीमित है। उस अंत तक, जब आप उन उपकरणों के ब्राउज़र में किसी मोडल के ऊपर या नीचे स्क्रॉल करते हैं, तो <body>सामग्री स्क्रॉल करना शुरू कर देगी। क्रोम बग #175502 ( क्रोम v40 में फिक्स्ड) और वेबकिट बग #153852 देखें ।
आईओएस टेक्स्ट फ़ील्ड और स्क्रॉलिंग
IOS 9.2 के अनुसार, जबकि एक मोडल खुला है, यदि स्क्रॉल जेस्चर का प्रारंभिक स्पर्श टेक्स्ट <input>या a की सीमा के भीतर है <textarea>, <body>तो मोडल के नीचे की सामग्री को मोडल के बजाय स्क्रॉल किया जाएगा। वेबकिट बग #153856 देखें ।
नेवबार ड्रॉपडाउन
जेड-इंडेक्सिंग की .dropdown-backdropजटिलता के कारण एनएवी में आईओएस पर तत्व का उपयोग नहीं किया जाता है। इस प्रकार, नेवबार में ड्रॉपडाउन को बंद करने के लिए, आपको सीधे ड्रॉपडाउन तत्व (या कोई अन्य तत्व जो आईओएस में एक क्लिक ईवेंट को सक्रिय करेगा ) पर क्लिक करना होगा।
ब्राउज़र ज़ूमिंग
पेज जूमिंग अनिवार्य रूप से बूटस्ट्रैप और बाकी वेब दोनों में कुछ घटकों में कलाकृतियों को प्रस्तुत करता है। समस्या के आधार पर, हम इसे ठीक करने में सक्षम हो सकते हैं (पहले खोजें और फिर यदि आवश्यक हो तो कोई समस्या खोलें)। हालाँकि, हम इन्हें नज़रअंदाज़ कर देते हैं क्योंकि उनके पास अक्सर हैकी वर्कअराउंड के अलावा कोई सीधा समाधान नहीं होता है।
स्टिकी :hover/ :focusआईओएस पर
जबकि :hoverअधिकांश स्पर्श उपकरणों पर संभव नहीं है, आईओएस इस व्यवहार का अनुकरण करता है, जिसके परिणामस्वरूप "चिपचिपा" होवर शैली होती है जो एक तत्व को टैप करने के बाद बनी रहती है। ये होवर शैलियाँ केवल तभी हटाई जाती हैं जब उपयोगकर्ता किसी अन्य तत्व को टैप करते हैं। यह व्यवहार काफी हद तक अवांछनीय माना जाता है और ऐसा लगता है कि Android या Windows उपकरणों पर कोई समस्या नहीं है।
हमारे पूरे v4 अल्फ़ा और बीटा रिलीज़ में, हमने मीडिया क्वेरी शिम में ऑप्ट-इन करने के लिए अपूर्ण और कमेंट आउट कोड शामिल किया है जो होवरिंग का अनुकरण करने वाले टच डिवाइस ब्राउज़र में होवर शैलियों को अक्षम कर देगा। यह काम कभी भी पूरी तरह से पूरा या सक्षम नहीं था, लेकिन पूर्ण टूटने से बचने के लिए, हमने इस शिम को पदावनत करने का विकल्प चुना है और मिक्सिन को छद्म-वर्गों के लिए शॉर्टकट के रूप में रखा है।
मुद्रण
कुछ आधुनिक ब्राउज़रों में भी, मुद्रण विचित्र हो सकता है।
सफ़ारी v8.0 के अनुसार, निश्चित-चौड़ाई वाले .containerवर्ग के उपयोग से सफ़ारी मुद्रण करते समय असामान्य रूप से छोटे फ़ॉन्ट आकार का उपयोग कर सकता है। अधिक जानकारी के लिए अंक #14868 और वेबकिट बग #138192 देखें । एक संभावित समाधान निम्नलिखित सीएसएस है:
@media print {
.container {
width: auto;
}
}
एंड्रॉइड स्टॉक ब्राउज़र
बॉक्स से बाहर, एंड्रॉइड 4.1 (और जाहिर तौर पर कुछ नए रिलीज भी) ब्राउज़र ऐप के साथ पसंद के डिफ़ॉल्ट वेब ब्राउज़र के रूप में जहाज (क्रोम के विपरीत)। दुर्भाग्य से, ब्राउज़र ऐप में सामान्य रूप से सीएसएस के साथ बहुत सारे बग और विसंगतियां हैं।
मेनू चुनें
तत्वों पर <select>, एंड्रॉइड स्टॉक ब्राउज़र साइड कंट्रोल प्रदर्शित नहीं करेगा यदि कोई border-radiusऔर/या borderलागू है। ( विवरण के लिए यह स्टैक ओवरफ्लो प्रश्न देखें।) आपत्तिजनक सीएसएस को हटाने के लिए नीचे दिए गए कोड के स्निपेट का उपयोग करें और <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>
एक उदाहरण देखना चाहते हैं? यह जेएस बिन डेमो देखें ।
प्रमाणकों
पुराने और छोटे ब्राउज़रों को सर्वोत्तम संभव अनुभव प्रदान करने के लिए, बूटस्ट्रैप कई स्थानों पर सीएसएस ब्राउज़र हैक्स का उपयोग करता है ताकि ब्राउज़र में बग के आसपास काम करने के लिए कुछ ब्राउज़र संस्करणों के लिए विशेष सीएसएस को लक्षित किया जा सके। ये हैक समझ में आता है कि सीएसएस सत्यापनकर्ता शिकायत करते हैं कि वे अमान्य हैं। कुछ जगहों पर, हम ब्लीडिंग-एज CSS सुविधाओं का भी उपयोग करते हैं जो अभी तक पूरी तरह से मानकीकृत नहीं हैं, लेकिन इनका उपयोग विशुद्ध रूप से प्रगतिशील वृद्धि के लिए किया जाता है।
ये सत्यापन चेतावनियां व्यवहार में कोई मायने नहीं रखती हैं क्योंकि हमारे सीएसएस का गैर-हैकी भाग पूरी तरह से मान्य है और हैकी हिस्से गैर-हैकी हिस्से के उचित कामकाज में हस्तक्षेप नहीं करते हैं, इसलिए हम जानबूझकर इन विशेष चेतावनियों को अनदेखा क्यों करते हैं।
हमारे HTML दस्तावेज़ों में भी कुछ मामूली और अप्रासंगिक HTML सत्यापन चेतावनियाँ हैं, जो हमारे द्वारा एक निश्चित Firefox बग के लिए समाधान शामिल किए जाने के कारण हैं ।