Source

ब्राउझर आणि उपकरणे

ब्राउझर आणि उपकरणांबद्दल जाणून घ्या, आधुनिक ते जुन्यापर्यंत, जे बूटस्ट्रॅपद्वारे समर्थित आहेत, प्रत्येकासाठी ज्ञात क्विर्क्स आणि बग्ससह.

समर्थित ब्राउझर

बूटस्ट्रॅप सर्व प्रमुख ब्राउझर आणि प्लॅटफॉर्मच्या नवीनतम, स्थिर प्रकाशनांना समर्थन देते. Windows वर, आम्ही Internet Explorer 10-11 / Microsoft Edge चे समर्थन करतो .

वेबकिट, ब्लिंक किंवा गेकोची नवीनतम आवृत्ती वापरणारे पर्यायी ब्राउझर, थेट किंवा प्लॅटफॉर्मच्या वेब व्ह्यू API द्वारे, स्पष्टपणे समर्थित नाहीत. तथापि, बूटस्ट्रॅपने (बहुतेक प्रकरणांमध्ये) या ब्राउझरमध्ये देखील योग्यरित्या प्रदर्शित आणि कार्य केले पाहिजे. अधिक विशिष्ट समर्थन माहिती खाली प्रदान केली आहे.

तुम्ही आमच्या समर्थित ब्राउझरची श्रेणी आणि त्यांच्या आवृत्त्या आमच्या येथे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 उपसर्गांद्वारे इच्छित ब्राउझर समर्थन हाताळण्यासाठी Autoprefixer वापरतो, जे या ब्राउझर आवृत्त्या व्यवस्थापित करण्यासाठी Browserslist वापरतात. ही साधने तुमच्या प्रकल्पांमध्ये कशी समाकलित करायची यासाठी त्यांच्या दस्तऐवजीकरणाचा सल्ला घ्या.

मोबाइल उपकरणे

सर्वसाधारणपणे, बूटस्ट्रॅप प्रत्येक प्रमुख प्लॅटफॉर्मच्या डीफॉल्ट ब्राउझरच्या नवीनतम आवृत्त्यांचे समर्थन करते. लक्षात ठेवा की प्रॉक्सी ब्राउझर (जसे की Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) समर्थित नाहीत.

क्रोम फायरफॉक्स सफारी Android ब्राउझर आणि WebView मायक्रोसॉफ्ट एज
अँड्रॉइड समर्थित समर्थित N/A Android v5.0+ समर्थित समर्थित
iOS समर्थित समर्थित समर्थित N/A समर्थित
विंडोज 10 मोबाईल N/A N/A N/A N/A समर्थित

डेस्कटॉप ब्राउझर

त्याचप्रमाणे, बहुतेक डेस्कटॉप ब्राउझरच्या नवीनतम आवृत्त्या समर्थित आहेत.

क्रोम फायरफॉक्स इंटरनेट एक्सप्लोरर मायक्रोसॉफ्ट एज ऑपेरा सफारी
मॅक समर्थित समर्थित N/A N/A समर्थित समर्थित
खिडक्या समर्थित समर्थित समर्थित, IE10+ समर्थित समर्थित सपोर्ट नाही

फायरफॉक्ससाठी, नवीनतम सामान्य स्थिर प्रकाशन व्यतिरिक्त, आम्ही फायरफॉक्सच्या नवीनतम विस्तारित समर्थन प्रकाशन (ESR) आवृत्तीला देखील समर्थन देतो.

अनधिकृतपणे, बूटस्ट्रॅपने क्रोमियम आणि लिनक्ससाठी क्रोम, लिनक्ससाठी फायरफॉक्स आणि इंटरनेट एक्सप्लोरर 9 मध्ये पुरेसे चांगले दिसले पाहिजे आणि वर्तन केले पाहिजे, जरी ते अधिकृतपणे समर्थित नाहीत.

बूटस्ट्रॅपला ज्या काही ब्राउझर बग्सचा सामना करावा लागतो त्यांच्या सूचीसाठी, आमची वॉल ऑफ ब्राउझर बग पहा .

इंटरनेट एक्सप्लोरर

इंटरनेट एक्सप्लोरर 10+ समर्थित आहे; IE9 आणि खाली नाही. कृपया लक्षात ठेवा की काही CSS3 गुणधर्म आणि HTML5 घटक IE10 मध्ये पूर्णपणे समर्थित नाहीत किंवा पूर्ण कार्यक्षमतेसाठी प्रीफिक्स गुणधर्म आवश्यक आहेत. CSS3 आणि HTML5 वैशिष्ट्यांच्या ब्राउझर समर्थनाच्या तपशीलांसाठी मी वापरू शकतो का… भेट द्या .

तुम्हाला IE8-9 समर्थनाची आवश्यकता असल्यास, बूटस्ट्रॅप 3 वापरा. ​​ही आमच्या कोडची सर्वात स्थिर आवृत्ती आहे आणि गंभीर बगफिक्स आणि दस्तऐवजीकरण बदलांसाठी आमच्या कार्यसंघाद्वारे अद्याप समर्थित आहे. मात्र, त्यात कोणतेही नवीन फिचर्स जोडले जाणार नाहीत.

मोबाईलवरील मॉडेल्स आणि ड्रॉपडाउन

ओव्हरफ्लो आणि स्क्रोलिंग

overflow: hidden;आयओएस आणि अँड्रॉइडमध्ये घटकासाठी समर्थन <body>खूपच मर्यादित आहे. त्यासाठी, जेव्हा तुम्ही यापैकी कोणत्याही डिव्हाइसच्या ब्राउझरमध्ये मॉडेलच्या वरच्या किंवा खालच्या बाजूला स्क्रोल कराल, तेव्हा <body>सामग्री स्क्रोल करणे सुरू होईल. Chrome बग #175502 ( Chrome v40 मध्ये निश्चित) आणि WebKit बग #153852 पहा .

iOS मजकूर फील्ड आणि स्क्रोलिंग

<input>iOS 9.2 नुसार, एखादे मॉडेल खुले असताना, स्क्रोल जेश्चरचा प्रारंभिक स्पर्श मजकूर किंवा a च्या सीमेत असल्यास, मॉडेलच्या खाली <textarea>असलेली <body>सामग्री मॉडेलऐवजी स्क्रोल केली जाईल. WebKit बग #153856 पहा .

.dropdown-backdropz-इंडेक्सिंगच्या जटिलतेमुळे घटक iOS वर nav मध्ये वापरला जात नाही . अशा प्रकारे, navbars मधील ड्रॉपडाउन बंद करण्यासाठी, तुम्ही थेट ड्रॉपडाउन घटकावर क्लिक केले पाहिजे (किंवा iOS मध्ये क्लिक इव्हेंट सुरू करणारा कोणताही घटक ).

ब्राउझर झूम करत आहे

पृष्ठ झूम करणे अपरिहार्यपणे बूटस्ट्रॅप आणि उर्वरित वेब दोन्हीमध्ये, काही घटकांमध्ये रेंडरिंग आर्टिफॅक्ट्स सादर करते. समस्येवर अवलंबून, आम्ही त्याचे निराकरण करण्यात सक्षम होऊ शकतो (आधी शोधा आणि नंतर गरज असल्यास समस्या उघडा). तथापि, आम्ही याकडे दुर्लक्ष करतो कारण त्यांच्याकडे बर्‍याचदा हॅकी वर्कअराउंड्सशिवाय कोणताही थेट उपाय नसतो.

चिकट :hover/ :focusiOS वर

:hoverबर्‍याच टच डिव्हाइसेसवर शक्य नसताना , iOS या वर्तनाचे अनुकरण करते, परिणामी "चिकट" होव्हर शैली एक घटक टॅप केल्यानंतर टिकून राहते. जेव्हा वापरकर्ते दुसर्‍या घटकावर टॅप करतात तेव्हाच या होव्हर शैली काढल्या जातात. हे वर्तन मोठ्या प्रमाणात अवांछनीय मानले जाते आणि Android किंवा Windows डिव्हाइसेसवर समस्या नसल्याचे दिसते.

आमच्या संपूर्ण v4 अल्फा आणि बीटा रिलीझमध्ये, आम्ही मीडिया क्वेरी शिममध्ये निवडण्यासाठी अपूर्ण कोड समाविष्ट केले आहे आणि त्यावर टिप्पणी केली आहे ज्यामुळे होव्हरिंगचे अनुकरण करणार्‍या टच डिव्हाइस ब्राउझरमध्ये होव्हर शैली अक्षम होईल. हे काम कधीही पूर्ण किंवा सक्षम केले गेले नाही, परंतु पूर्ण तुटणे टाळण्यासाठी, आम्ही या शिमचे अवमूल्यन करणे आणि छद्म-वर्गासाठी शॉर्टकट म्हणून मिक्सिन ठेवण्याचे निवडले आहे.

छपाई

जरी काही आधुनिक ब्राउझरमध्ये, मुद्रण विचित्र असू शकते.

Safari v8.0 नुसार, निश्चित-रुंदीच्या .containerवर्गाचा वापर केल्याने Safari प्रिंट करताना असामान्यपणे लहान फॉन्ट आकार वापरू शकतो. अधिक तपशीलांसाठी अंक #14868 आणि वेबकिट बग #138192 पहा. एक संभाव्य उपाय खालील CSS आहे:

@media print {
  .container {
    width: auto;
  }
}

Android स्टॉक ब्राउझर

बॉक्सच्या बाहेर, Android 4.1 (आणि वरवर पाहता काही नवीन रिलीझ देखील) ब्राउझर अॅपसह पसंतीचे डीफॉल्ट वेब ब्राउझर म्हणून पाठवले जातात (Chrome च्या विरूद्ध). दुर्दैवाने, ब्राउझर अॅपमध्ये सामान्यतः CSS सह बरेच बग आणि विसंगती आहेत.

मेनू निवडा

घटकांवर , <select>अँड्रॉइड स्टॉक ब्राउझर साइड कंट्रोल्स प्रदर्शित करणार नाही border-radiusआणि/किंवा borderलागू केले असल्यास. (तपशीलांसाठी हा स्टॅकओव्हरफ्लो प्रश्न पहा.) आक्षेपार्ह CSS काढण्यासाठी आणि <select>Android स्टॉक ब्राउझरवर अनस्टाइल घटक म्हणून प्रस्तुत करण्यासाठी खालील कोडचा स्निपेट वापरा. वापरकर्ता एजंट स्निफिंग 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>

उदाहरण पाहू इच्छिता? हा जेएस बिन डेमो पहा.

प्रमाणीकरणकर्ते

जुन्या आणि बग्गी ब्राउझरना शक्य तितका सर्वोत्तम अनुभव देण्यासाठी, बूटस्ट्रॅप अनेक ठिकाणी CSS ब्राउझर हॅक वापरते जेणेकरुन ब्राउझरमध्ये स्वतःच बग्सवर काम करण्यासाठी विशिष्ट ब्राउझर आवृत्त्यांसाठी विशेष CSS लक्ष्यित केले जावे. या हॅकमुळे CSS व्हॅलिडेटर अवैध असल्याची तक्रार करतात. काही ठिकाणी, आम्ही ब्लीडिंग-एज CSS वैशिष्ट्ये देखील वापरतो जी अद्याप पूर्णपणे प्रमाणित नाहीत, परंतु ती पूर्णपणे प्रगतीशील वाढीसाठी वापरली जातात.

या प्रमाणीकरण चेतावणी व्यवहारात काही फरक पडत नाहीत कारण आमच्या CSS चा नॉन-हॅकी भाग पूर्णपणे प्रमाणित करतो आणि हॅकी भाग नॉन-हॅकी भागाच्या योग्य कार्यामध्ये व्यत्यय आणत नाहीत, म्हणून आम्ही या विशिष्ट इशाऱ्यांकडे जाणीवपूर्वक दुर्लक्ष का करतो.

आमच्या HTML दस्तऐवजांमध्ये काही क्षुल्लक आणि विसंगत HTML प्रमाणीकरण चेतावणी आहेत कारण आम्ही एका विशिष्ट फायरफॉक्स बगसाठी वर्कअराउंड समाविष्ट करतो .