ब्राउजर् तथा उपकरण
आधुनिकतः पुरातनपर्यन्तं ब्राउजर्-यन्त्राणां विषये ज्ञातव्यम्, ये Bootstrap द्वारा समर्थिताः सन्ति, यत्र प्रत्येकस्य कृते ज्ञाताः विचित्रताः, दोषाः च सन्ति ।
बूटस्ट्रैप् सर्वेषां प्रमुखब्राउजर्-मञ्चानां नवीनतमं, स्थिरं विमोचनं समर्थयति । विण्डोज इत्यत्र वयं Internet Explorer 10-11 / Microsoft Edge इत्यस्य समर्थनं कुर्मः ।
वैकल्पिक ब्राउजर् ये WebKit, Blink, अथवा Gecko इत्यस्य नवीनतमं संस्करणं उपयुञ्जते, ते प्रत्यक्षतया वा मञ्चस्य web view 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 ब्राउज़र एवं वेबव्यू | माइक्रोसॉफ्ट एज | |
|---|---|---|---|---|---|
| एण्ड्रॉयड् इति | समर्थित | समर्थित | न/अ | Android v5.0+ समर्थितम् | समर्थित |
| iOS इति | समर्थित | समर्थित | समर्थित | न/अ | समर्थित |
| विण्डोज १० मोबाईल | न/अ | न/अ | न/अ | न/अ | समर्थित |
तथैव अधिकांशस्य डेस्कटॉप् ब्राउजर् इत्यस्य नवीनतमसंस्करणं समर्थितम् अस्ति ।
| क्रोम इति | फायरफॉक्स इति | अन्तर्जाल एक्स्प्लोरर | माइक्रोसॉफ्ट एज | ओपेरा | सफारी | |
|---|---|---|---|---|---|---|
| मैक | समर्थित | समर्थित | न/अ | न/अ | समर्थित | समर्थित |
| विण्डोजः | समर्थित | समर्थित | समर्थित, IE10+ | समर्थित | समर्थित | न समर्थितम् |
Firefox कृते, नवीनतमस्य सामान्यस्थिरविमोचनस्य अतिरिक्तं, वयं Firefox इत्यस्य नवीनतमस्य विस्तारितसमर्थनविमोचनस्य (ESR) संस्करणस्य अपि समर्थनं कुर्मः ।
अनधिकृतरूपेण, Bootstrap इत्येतत् Chromium तथा Chrome for Linux, Firefox for Linux, Internet Explorer 9 इत्येतयोः मध्ये पर्याप्तं सुन्दरं दृश्यते, व्यवहारं च कर्तव्यम्, यद्यपि ते आधिकारिकतया समर्थिताः न सन्ति
Bootstrap इत्यस्य केषाञ्चन ब्राउजर्-दोषाणां सूचीयाः कृते अस्माकं Wall of browser bugs पश्यन्तु ।
Internet Explorer 10+ समर्थितम् अस्ति; IE9 and down इति न भवति। कृपया अवगच्छन्तु यत् केचन CSS3 गुणाः HTML5 तत्त्वानि च IE10 मध्ये पूर्णतया समर्थिताः न सन्ति, अथवा पूर्णकार्यक्षमतायै उपसर्गयुक्तगुणानां आवश्यकता वर्तते । CSS3 तथा HTML5 विशेषतानां ब्राउजर् समर्थनविषये विवरणार्थं Can I use... इति पश्यन्तु ।
यदि भवान् 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 देखें ।
.dropdown-backdropz-indexing इत्यस्य जटिलतायाः कारणात् nav इत्यस्मिन् iOS इत्यत्र तत्त्वं न ��पयुज्यते । एवं, navbars मध्ये dropdowns बन्दं कर्तुं, भवद्भिः प्रत्यक्षतया dropdown element (अथवा अन्यः कोऽपि element यः iOS मध्ये click event प्रज्वालयति ) क्लिक् कर्तव्यः ।
पृष्ठस्य जूमिंग् अनिवार्यतया केषुचित् घटकेषु रेण्डरिंग आर्टिफैक्ट् प्रस्तुतं करोति, Bootstrap इत्यत्र अपि च शेषजालस्य मध्ये । मुद्देः आधारेण वयं तत् समाधातुं शक्नुमः (प्रथमं अन्वेषणं कुर्वन्तु ततः आवश्यकतानुसारं मुद्दाम् उद्घाटयन्तु)। तथापि वयं एतान् उपेक्षितुं प्रवृत्ताः स्मः यतः तेषु प्रायः हैकी-कार्यपरिहारात् परं प्रत्यक्षं समाधानं नास्ति ।
यद्यपि :hoverअधिकांशस्पर्शयन्त्रेषु सम्भवं नास्ति तथापि iOS एतत् व्यवहारं अनुकरणं करोति, यस्य परिणामेण “चिपचिपा” होवरशैल्याः भवन्ति ये एकं तत्त्वं टैप् कृत्वा स्थास्यन्ति । एताः होवरशैल्याः केवलं तदा एव निष्कासिताः भवन्ति यदा उपयोक्तारः अन्यं तत्त्वं ट्याप् कुर्वन्ति । एषः व्यवहारः बहुधा अनिष्टः इति मन्यते, एण्ड्रॉयड् अथवा विण्डोज-यन्त्रेषु समस्या न इति दृश्यते ।
अस्माकं v4 अल्फा तथा बीटा विमोचनेषु सम्पूर्णे वयं अपूर्णं तथा च एकं मीडिया-क्वेरी-शिम-मध्ये विकल्पार्थं कोडं समावेशितवन्तः टिप्पणीं कृतवन्तः यत् होवरिंग् अनुकरणं कुर्वन्ति स्पर्श-यन्त्र-ब्राउजर्-मध्ये होवर-शैल्याः अक्षमीकरणं करिष्यति |. इदं कार्यं कदापि पूर्णतया सम्पन्नं वा सक्षमं वा न जातम्, परन्तु पूर्णतया भङ्गं परिहरितुं वयं एतत् शिमं निराकृत्य छद्मवर्गाणां कृते मिक्सिन्-इत्येतत् शॉर्टकट्-रूपेण स्थापयितुं विकल्पितवन्तः।
केषुचित् आधुनिकब्राउजर्-मध्ये अपि मुद्रणं विचित्रं भवितुम् अर्हति ।
Safari v8.0 इत्यस्मात् आरभ्य, नियत-विस्तार- .containerवर्गस्य उपयोगेन Safari मुद्रणकाले असामान्यतया लघु-अक्षर-आकारस्य उपयोगं कर्तुं शक्नोति । अधिकविवरणार्थं मुद्दा #14868 तथा WebKit दोष #138192 पश्यन्तु । एकं सम्भाव्यं कार्यपरिहारं निम्नलिखितम् CSS अस्ति ।
@media print {
.container {
width: auto;
}
}पेटीतः बहिः, Android 4.1 (तथा अपि केचन नवीनाः विमोचनाः प्रत्यक्षतया) Browser app इत्यनेन सह पसन्दस्य पूर्वनिर्धारितजालब्राउजर् (Chrom इत्यस्य विरुद्धम्) रूपेण निर्यातयन्ति दुर्भाग्येन Browser app इत्यस्मिन् सामान्यतया CSS इत्यनेन सह बहुधा दोषाः असङ्गतिः च अस्ति ।
तत्वेषु <select>, Android स्टॉक ब्राउज़रः पार्श्वनियन्त्रणानि न प्रदर्शयिष्यति यदि एकः अस्ति border-radiusतथा/वा borderप्रयुक्तः अस्ति। (विवरणार्थं एतत् StackOverflow प्रश्नं पश्यन्तु।) आपत्तिजनकं CSS निष्कासयितुं अधोलिखितस्य कोडस्य स्निपेटस्य उपयोगं कुर्वन्तु तथा <select>च Android स्टॉक ब्राउजरे the as an unstyled element render. उपयोक्तृ-एजेण्ट-स्निफिंग्-करणेन 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 दस्तावेजेषु अपि तथैव कतिपयस्य Firefox दोषस्य कृते अस्माकं कार्यपरिहारस्य समावेशस्य कारणेन केचन तुच्छाः अपरिणामिकाः च HTML प्रमाणीकरणचेतावनीः सन्ति |.