Source

ब्राउजर र उपकरणहरू

ब्राउजर र उपकरणहरू बारे जान्नुहोस्, आधुनिक देखि पुरानो सम्म, जुन बुटस्ट्र्याप द्वारा समर्थित छ, प्रत्येकका लागि ज्ञात quirks र बगहरू सहित।

समर्थित ब्राउजरहरू

बुटस्ट्र्यापले सबै प्रमुख ब्राउजरहरू र प्लेटफर्महरूको नवीनतम, स्थिर रिलीजहरूलाई समर्थन गर्दछ। Windows मा, हामी Internet Explorer 10-11 / Microsoft Edge लाई समर्थन गर्छौं ।

वैकल्पिक ब्राउजरहरू जसले WebKit, Blink, वा Gecko को नवीनतम संस्करण प्रयोग गर्दछ, चाहे प्रत्यक्ष वा प्लेटफर्मको वेब दृश्य 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 प्रयोग गर्छौं, जसले यी ब्राउजर संस्करणहरू प्रबन्ध गर्न ब्राउजरलिस्ट प्रयोग गर्दछ। यी उपकरणहरूलाई तपाइँको परियोजनाहरूमा कसरी एकीकृत गर्ने भनेर तिनीहरूको कागजातहरू हेर्नुहोस्।

मोबाइल उपकरणहरू

सामान्यतया, बुटस्ट्र्यापले प्रत्येक प्रमुख प्लेटफर्मको पूर्वनिर्धारित ब्राउजरहरूको नवीनतम संस्करणहरूलाई समर्थन गर्दछ। ध्यान दिनुहोस् कि प्रोक्सी ब्राउजरहरू (जस्तै ओपेरा मिनी, ओपेरा मोबाइलको टर्बो मोड, UC ब्राउजर मिनी, अमेजन सिल्क) समर्थित छैनन्।

क्रोम फायरफक्स सफारी एन्ड्रोइड ब्राउजर र वेबभ्यू माइक्रोसफ्ट एज
एन्ड्रोइड समर्थित समर्थित N/A एन्ड्रोइड v5.0+ समर्थित समर्थित
iOS समर्थित समर्थित समर्थित N/A समर्थित
Windows 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 समर्थन चाहिन्छ भने, Bootstrap 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 ले यो व्यवहारको अनुकरण गर्छ, जसको परिणामस्वरूप "स्टिकी" होभर शैलीहरू हुन्छन् जुन एक तत्व ट्याप गरेपछि पनि रहन्छ। प्रयोगकर्ताहरूले अर्को तत्व ट्याप गर्दा मात्र यी होभर शैलीहरू हटाइन्छ। यो व्यवहार धेरै हदसम्म अवांछनीय मानिन्छ र एन्ड्रोइड वा विन्डोज उपकरणहरूमा एक मुद्दा होइन जस्तो देखिन्छ।

हाम्रो v4 अल्फा र बिटा रिलिजहरूमा, हामीले मिडिया क्वेरी शिममा अप्ट इन गर्नको लागि अपूर्ण कोड समावेश गर्यौं र होभरिङ अनुकरण गर्ने टच उपकरण ब्राउजरहरूमा होभर शैलीहरू असक्षम पार्छ। यो काम कहिल्यै पूर्ण रूपमा सम्पन्न वा सक्षम गरिएको थिएन, तर पूर्ण विघटनबाट बच्नको लागि, हामीले यो शिमलाई अस्वीकार गर्ने र स्यूडो-क्लासहरूको लागि सर्टकटको रूपमा मिक्सिनहरू राख्न रोजेका छौं ।

मुद्रण

केही आधुनिक ब्राउजरहरूमा पनि, मुद्रण quirky हुन सक्छ।

Safari v8.0 को रूपमा, निश्चित-चौडाइ .containerवर्गको प्रयोगले सफारीलाई मुद्रण गर्दा असामान्य रूपमा सानो फन्ट साइज प्रयोग गर्न सक्छ। थप विवरणहरूको लागि मुद्दा #14868 र WebKit बग #138192 हेर्नुहोस्। एउटा सम्भावित समाधान निम्न CSS हो:

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

एन्ड्रोइड स्टक ब्राउजर

बक्सको बाहिर, एन्ड्रोइड 4.1 (र केही नयाँ रिलीजहरू पनि स्पष्ट रूपमा) ब्राउजर एपसँग छनोटको पूर्वनिर्धारित वेब ब्राउजरको रूपमा पठाइन्छ (क्रोमको विपरीत)। दुर्भाग्यवश, ब्राउजर एपमा सामान्य रूपमा CSS सँग धेरै बगहरू र असंगतताहरू छन्।

मेनु चयन गर्नुहोस्

तत्वहरूमा , <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>

उदाहरण हेर्न चाहनुहुन्छ? यो जेएस बिन डेमो जाँच गर्नुहोस्।

मान्यकर्ताहरू

पुराना र बग्गी ब्राउजरहरूलाई उत्कृष्ट सम्भावित अनुभव प्रदान गर्नको लागि, बुटस्ट्र्यापले धेरै ठाउँहरूमा CSS ब्राउजर ह्याकहरू प्रयोग गर्दछ विशेष CSS लाई निश्चित ब्राउजर संस्करणहरूमा लक्षित गर्नका लागि ब्राउजरहरूमा बगहरू वरपर काम गर्न। यी ह्याकहरूले CSS प्रमाणिकरणकर्ताहरूलाई तिनीहरू अमान्य छन् भनी गुनासो गर्नको लागि बुझिन्छ। केही स्थानहरूमा, हामीले ब्लीडिङ-एज CSS सुविधाहरू पनि प्रयोग गर्छौं जुन अझै पूर्ण रूपमा मानकीकृत छैन, तर यी पूर्ण रूपमा प्रगतिशील वृद्धिको लागि प्रयोग गरिन्छ।

यी प्रमाणीकरण चेतावनीहरूले व्यवहारमा फरक पार्दैन किनभने हाम्रो CSS को गैर-ह्याकी भागले पूर्ण रूपमा प्रमाणीकरण गर्छ र ह्याकी भागहरूले गैर-ह्याकी भागको उचित कार्यमा हस्तक्षेप गर्दैन, त्यसैले हामी किन जानाजानी यी विशेष चेतावनीहरूलाई बेवास्ता गर्छौं।

हाम्रो HTML कागजातहरूमा पनि निश्चित फायरफक्स बगको लागि समाधानको समावेशको कारणले गर्दा केही तुच्छ र अप्रासंगिक HTML प्रमाणीकरण चेतावनीहरू छन् ।