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