ब्राउझर आनी साधनां
आधुनीक ते पोरन्या ब्राउझर आनी डिव्हायसां विशीं जाणून घेयात, जे 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"
]
CSS उपसर्गां वरवीं हेतू आशिल्लो ब्राउझर आदार हाताळपाक आमी Autoprefixer वापरतात, जो ह्या ब्राउझर आवृत्त्यो वेवस्थापन करूंक Browserslist वापरता. तुमच्या प्रकल्पांत हीं साधनां कशीं एकठांय करचीं हाचे खातीर तांच्या दस्तावेजांचो सल्लो घेयात.
सादारणपणान, Bootstrap दरेका मुखेल प्लॅटफॉर्माच्या मुलभूत ब्राउझरांच्या नवीनतम आवृत्त्यांक तेंको दिता. लक्षांत दवरात की प्रॉक्सी ब्राउझर (देखीक Opera Mini, Opera Mobile चो Turbo मोड, UC Browser Mini, Amazon Silk) समर्थीत नात.
| क्रोम हें नांव | फायरफॉक्स हांणी केला | सफारी हें नांव | एंड्रॉयड ब्राउझर आनी वेबव्यू | मायक्रोसॉफ्ट एज | |
|---|---|---|---|---|---|
| एंड्रॉयड हें नांव | समर्थीत केला | समर्थीत केला | एन / ए | Android v5.0+ समर्थीत आसा | समर्थीत केला |
| आयओएस | समर्थीत केला | समर्थीत केला | समर्थीत केला | एन / ए | समर्थीत केला |
| विंडोज 10 मोबायल | एन / ए | एन / ए | एन / ए | एन / ए | समर्थीत केला |
तेच प्रमाणें, चडशा डेस्कटॉप ब्राउझरांची नवीनतम आवृत्ती समर्थीत आसा.
| क्रोम हें नांव | फायरफॉक्स हांणी केला | इंटरनॅट एक्सप्लोरर | मायक्रोसॉफ्ट एज | ओपेरा | सफारी हें नांव | |
|---|---|---|---|---|---|---|
| मॅक हें नांव | समर्थीत केला | समर्थीत केला | एन / ए | एन / ए | समर्थीत केला | समर्थीत केला |
| जनेलां | समर्थीत केला | समर्थीत केला | समर्थीत, IE10+ | समर्थीत केला | समर्थीत केला | समर्थीत ना |
Firefox खातीर, नवीनतम सामान्य स्थिर प्रकाशना वांगडाच, आमी Firefox च्या नवीनतम विस्तारीत आदार प्रकाशन (ESR) आवृत्तीकय तेंको दितात.
अनधिकृतपणान, बूटस्ट्रॅप क्रोमियम आनी क्रोम फॉर लिनक्स, फायरफॉक्स फॉर लिनक्स, आनी इंटरनॅट एक्सप्लोरर 9 हातूंत फावो त्या प्रमाणांत बरो दिसपाक जाय आनी वागपाक जाय, जरी तांकां अधिकृतपणान तेंको नासलो तरी.
बूटस्ट्रॅपाक झगडपाक जाय आशिल्ल्या कांय ब्राउझर बगांची वळेरी खातीर, पळयात आमची ब्राउझर बगांची वण्टी .
इंटरनॅट एक्सप्लोरर 10+ समर्थीत आसा; IE9 आनी सकयल ना. उपकार करून लक्षांत दवरात की कांय CSS3 गुणधर्म आनी HTML5 घटक IE10 त पुरायपणान समर्थीत नात, वा पुराय कार्यक्षमताय खातीर उपसर्ग गुणधर्मांची गरज आसा. CSS3 आनी HTML5 वैशिश्ट्यांच्या ब्राउझर आदाराचेर तपशीलां खातीर हांव वापरूं येता... भेट दिवची .
तुमकां IE8-9 आदार जाय जाल्यार, Bootstrap 3 वापरात.हें आमच्या कोडाची सगळ्यांत स्थिर आवृत्ती आसा आनी अजूनय गंभीर बगफिक्स आनी दस्तावेजीकरण बदलां खातीर आमच्या पंगडान तेंको दिला. पूण तातूंत कसलीच नवी खाशेलपणां जोडचीं नात.
overflow: hidden;on the element खातीर आदार <body>iOS आनी Android त सामको मर्यादीत आसा. ते खातीर, जेन्ना तुमी त्या खंयच्याय डिव्हायसाच्या ब्राउझरांतल्या मोडलाच्या वयल्या वा सकयल्या भागांतल्यान स्क्रोल करतात, तेन्ना <body>सामुग्री स्क्रोल करपाक लागतली. Chrome बग #175502 ( Chrome v40 त निवळ केला) आनी WebKit बग #153852 पळयात .
<input>iOS 9.2 सावन, मोडल उक्तो आसतना, स्क्रोल हावभावाचो सुरवातीचो स्पर्श मजकूर वा a च्या मर्यादे भितर आसल्यार <textarea>, <body>मोडाला सकयल आशिल्ली सामग्री मोडलाच्याच बदला स्क्रोल जातली. वेबकिट बग #153856 पळयात .
z-indexing च्या गुंतागुंतीक लागून nav च्या iOS चेर .dropdown-backdropघटक वापरनात. अशे तरेन, navbars मदीं ड्रॉपडावन बंद करपाक, तुमी थेट ड्रॉपडावन घटकाचेर क्लिक करचो पडटलो (वा हेर खंयचोय घटक जो iOS त क्लिक घडणूक फायर करतलो ).
पृष्ठ झूम करप अपरिहार्यपणान कांय घटकांत रेंडरींग आर्टिफॅक्ट सादर करता, बूटस्ट्रॅप आनी उरिल्ल्या वेबांत. मुद्द्याचेर आदारून आमी तो सुदारूंक शकतले (पयलीं सोद घेयात आनी मागीर गरज पडल्यार मुद्दो उगडात). पूण, आमी ह्या कडेन दुर्लक्ष करपाची प्रवृत्ती आसता कारण तांकां चड करून हॅकी वर्कअराउंड सोडल्यार हेर कसलोच थेट उपाय नासता.
:hoverचडशा स्पर्श डिव्हायसांचेर शक्य नासलें तरी, iOS ही वागणूक अनुकरण करता, ताचो परिणाम म्हळ्यार एक घटक टॅप केल्या उपरांत टिकपी “चिकट” होवर शैली . वापरप्यांनी दुसऱ्या घटकाक टॅप करतनाच ह्यो होवर शैली काडून उडयतात. ही वागणूक चड करून अनिष्ट मानतात आनी Android वा Windows डिव्हायसांचेर मुद्दो ना अशें दिसता.
आमच्या पुराय v4 आल्फा आनी बीटा प्रकाशनांत, आमी होवरिंग अनुकरण करपी स्पर्श डिव्हायस ब्राउझरांत होवर शैली अक्षम करपी मिडिया क्वेरी शिमांत निवड करपा खातीर अपूर्ण आनी टिप्पणी केल्लो कोड समाविष्ट केलो. हें काम केन्नाच पुरायपणान पुराय जावंक नाशिल्लें वा सक्षम करूंक नाशिल्लें, पूण पुरायपणान मोडप टाळपा खातीर, आमी हें शिम न्हयकारपाचो आनी मिक्सिनांक छद्म-वर्गां खातीर शॉर्टकट म्हणून दवरपाचो पर्याय घेतला.
कांय आधुनीक ब्राउझरांत लेगीत छापणावळ विचित्र आसूं येता.
Safari v8.0 च्या आदारान, स्थिर-रुंदायेच्या .containerवर्गाचो वापर केल्ल्यान Safari मुद्रण करतना असामान्य ल्हान फॉन्ट आकार वापरपाक कारण जावं येता. चड तपशीलां खातीर मुद्दो #14868 आनी WebKit बग #138192 पळयात. एक संभाव्य उपाय म्हळ्यार सकयल दिल्लो CSS:
@media print {
.container {
width: auto;
}
}बॉक्सांतल्यान भायर, Android 4.1 (आनी कांय नवी प्रकाशनां लेगीत दिसता) ब्राउझर ऍप्लिकेशना वांगडा निवडीचो मुलभूत वेब ब्राउझर म्हणून धाडटात (Chrome च्या विरुद्ध). दुर्दैवान, ब्राउझर ऍप्लिकेशनांत जायते बग आनी सामान्यपणान CSS कडेन विसंगती आसात.
घटकांचेर , जर एक आनी/वा लागू <select>केला जाल्यार Android स्टॉक ब्राउझर बाजू नियंत्रण दाखोवचो ना . ( तपशीलां खातीर हो StackOverflow प्रस्न पळयात.) आक्षेपार्ह CSS काडून उडोवपाक आनी Android स्टॉक ब्राउझराचेर the unstyled घटक म्हणून रेंडर करपाक सकयल दिल्ल्या कोडाचे स्निपेट वापरात. वापरपी एजंट सुंगटां मारप Chrome, Safari, आनी Mozilla ब्राउझरांत हस्तक्षेप टाळटा.border-radiusborder<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 लक्ष्य करपाक जायत्या सुवातींनी CSS ब्राउझर हॅक वापरता. ह्या हॅकांक लागून CSS प्रमाणकांक ते अवैध आसात अशी कागाळ करप समजून घेवपासारकें आसा. एक दोन सुवातींनी, आमी ब्लीडिंग-एज CSS वैशिश्ट्यांय वापरतात जीं अजून पुरायपणान प्रमाणीत करूंक नात, पूण हीं शुध्दपणान प्रगतीशील वाडोवपा खातीर वापरतात.
आमच्या CSS चो बिगर-हॅकी भाग पुरायपणान प्रमाणीत करता आनी हॅकी भाग बिगर-हॅकी भागाच्या योग्य कार्यांत हस्तक्षेप करिनात देखून ह्या प्रमाणीकरण शिटकावणींक वेव्हारांत कसलोच फरक पडना, देखून आमी मुद्दाम ह्या खाशेल्या शिटकावणीं कडेन दुर्लक्ष कित्याक करतात.
आमच्या HTML डॉक्सांत तशेंच कांय तुच्छ आनी निरर्थक HTML प्रमाणीकरण शिटकावणी आसात कारण आमच्या एका खाशेल्या Firefox बगा खातीर एक वर्कअराउंड आस्पाव केला .