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 નો ઉપયોગ કરીએ છીએ, જે આ બ્રાઉઝર સંસ્કરણોને સંચાલિત કરવા માટે બ્રાઉઝરલિસ્ટનો ઉપયોગ કરે છે. આ ટૂલ્સને તમારા પ્રોજેક્ટ્સમાં કેવી રીતે એકીકૃત કરવા તે માટે તેમના દસ્તાવેજોની સલાહ લો.

મોબાઇલ ઉપકરણો

સામાન્ય રીતે કહીએ તો, બુટસ્ટ્રેપ દરેક મુખ્ય પ્લેટફોર્મના ડિફોલ્ટ બ્રાઉઝર્સના નવીનતમ સંસ્કરણોને સપોર્ટ કરે છે. નોંધ કરો કે પ્રોક્સી બ્રાઉઝર્સ (જેમ કે ઓપેરા મિની, ઓપેરા મોબાઈલનો ટર્બો મોડ, યુસી બ્રાઉઝર મિની, એમેઝોન સિલ્ક) સપોર્ટેડ નથી.

ક્રોમ ફાયરફોક્સ સફારી એન્ડ્રોઇડ બ્રાઉઝર અને વેબવ્યુ માઈક્રોસોફ્ટ એજ
એન્ડ્રોઇડ આધારભૂત આધારભૂત N/A Android v5.0+ સપોર્ટેડ આધારભૂત
iOS આધારભૂત આધારભૂત આધારભૂત N/A આધારભૂત
વિન્ડોઝ 10 મોબાઈલ N/A N/A N/A N/A આધારભૂત

ડેસ્કટોપ બ્રાઉઝર્સ

એ જ રીતે, મોટાભાગના ડેસ્કટોપ બ્રાઉઝર્સના નવીનતમ સંસ્કરણો સપોર્ટેડ છે.

ક્રોમ ફાયરફોક્સ ઈન્ટરનેટ એક્સપ્લોરર માઈક્રોસોફ્ટ એજ ઓપેરા સફારી
મેક આધારભૂત આધારભૂત N/A N/A આધારભૂત આધારભૂત
વિન્ડોઝ આધારભૂત આધારભૂત સપોર્ટેડ, IE10+ આધારભૂત આધારભૂત આધારભૂત નથી

ફાયરફોક્સ માટે, નવીનતમ સામાન્ય સ્થિર પ્રકાશન ઉપરાંત, અમે ફાયરફોક્સના નવીનતમ વિસ્તૃત સપોર્ટ રીલીઝ (ESR) સંસ્કરણને પણ સમર્થન આપીએ છીએ.

બિનસત્તાવાર રીતે, બુટસ્ટ્રેપ એ ક્રોમિયમ અને ક્રોમ ફોર Linux, ફાયરફોક્સ ફોર લિનક્સ અને ઈન્ટરનેટ એક્સપ્લોરર 9 માં યોગ્ય દેખાવું અને વર્તવું જોઈએ, જો કે તે સત્તાવાર રીતે સમર્થિત નથી.

બુટસ્ટ્રેપને જે બ્રાઉઝર ભૂલોનો સામનો કરવો પડે છે તેની સૂચિ માટે, અમારી બ્રાઉઝર બગ્સની દિવાલ જુઓ .

ઈન્ટરનેટ એક્સપ્લોરર

ઇન્ટરનેટ એક્સપ્લોરર 10+ સપોર્ટેડ છે; IE9 અને નીચે નથી. કૃપા કરીને ધ્યાન રાખો કે કેટલીક CSS3 પ્રોપર્ટીઝ અને HTML5 એલિમેન્ટ્સ IE10 માં સંપૂર્ણપણે સપોર્ટેડ નથી અથવા સંપૂર્ણ કાર્યક્ષમતા માટે પ્રીફિક્સ પ્રોપર્ટીઝની જરૂર છે. CSS3 અને HTML5 સુવિધાઓના બ્રાઉઝર સપોર્ટ પર વિગતો માટે શું હું ઉપયોગ કરી શકું છું... ની મુલાકાત લો .

જો તમને IE8-9 સપોર્ટની જરૂર હોય, તો બુટસ્ટ્રેપ 3 નો ઉપયોગ કરો. તે અમારા કોડનું સૌથી સ્થિર સંસ્કરણ છે અને ગંભીર બગફિક્સ અને દસ્તાવેજીકરણ ફેરફારો માટે હજુ પણ અમારી ટીમ દ્વારા સપોર્ટેડ છે. જો કે, તેમાં કોઈ નવી સુવિધાઓ ઉમેરવામાં આવશે નહીં.

મોબાઇલ પર મોડલ અને ડ્રોપડાઉન

ઓવરફ્લો અને સ્ક્રોલિંગ

overflow: hidden;આઇઓએસ અને એન્ડ્રોઇડમાં એલિમેન્ટ માટે સપોર્ટ <body>તદ્દન મર્યાદિત છે. તે માટે, જ્યારે તમે તેમાંથી કોઈપણ ઉપકરણના બ્રાઉઝરમાં મોડલની ઉપર અથવા નીચેથી સ્ક્રોલ કરો છો, ત્યારે <body>સામગ્રી સ્ક્રોલ કરવાનું શરૂ કરશે. જુઓ ક્રોમ બગ #175502 (Chrome v40 માં સુધારેલ) અને WebKit બગ #153852 .

iOS ટેક્સ્ટ ફીલ્ડ્સ અને સ્ક્રોલિંગ

<input>iOS 9.2 મુજબ, જ્યારે મોડલ ખુલ્લું હોય, તો જો સ્ક્રોલ હાવભાવનો પ્રારંભિક સ્પર્શ ટેક્સ્ટ અથવા a ની સીમામાં હોય, તો મોડલની <textarea>નીચેની <body>સામગ્રીને મોડલને બદલે સ્ક્રોલ કરવામાં આવશે. વેબકિટ બગ #153856 જુઓ .

z- ઇન્ડેક્સીંગની .dropdown-backdropજટિલતાને કારણે નેવમાં iOS પર તત્વનો ઉપયોગ થતો નથી. આમ, નેવબાર્સમાં ડ્રોપડાઉન બંધ કરવા માટે, તમારે ડ્રોપડાઉન એલિમેન્ટ (અથવા કોઈપણ અન્ય ઘટક જે iOS માં ક્લિક ઇવેન્ટને ફાયર કરશે ) પર સીધું જ ક્લિક કરવું પડશે.

બ્રાઉઝર ઝૂમિંગ

પૃષ્ઠ ઝૂમિંગ અનિવાર્યપણે કેટલાક ઘટકોમાં, બૂટસ્ટ્રેપ અને બાકીના વેબ બંનેમાં રેન્ડરિંગ આર્ટિફેક્ટ રજૂ કરે છે. સમસ્યાના આધારે, અમે તેને ઠીક કરી શકીએ છીએ (પહેલા શોધો અને પછી જો જરૂર હોય તો સમસ્યા ખોલો). જો કે, અમે આને અવગણીએ છીએ કારણ કે તેમની પાસે હેકી વર્કઅરાઉન્ડ સિવાય કોઈ સીધો ઉકેલ નથી.

સ્ટીકી :hover/ :focusiOS પર

:hoverમોટાભાગના ટચ ઉપકરણો પર શક્ય ન હોવા છતાં, iOS આ વર્તણૂકનું અનુકરણ કરે છે, પરિણામે "સ્ટીકી" હોવર શૈલીઓ જે એક ઘટકને ટેપ કર્યા પછી ચાલુ રહે છે . જ્યારે વપરાશકર્તાઓ અન્ય ઘટકને ટેપ કરે છે ત્યારે જ આ હોવર શૈલીઓ દૂર કરવામાં આવે છે. આ વર્તણૂક મોટાભાગે અનિચ્છનીય માનવામાં આવે છે અને એવું લાગે છે કે Android અથવા Windows ઉપકરણો પર કોઈ સમસ્યા નથી.

અમારા સમગ્ર v4 આલ્ફા અને બીટા રીલીઝ દરમિયાન, અમે મીડિયા ક્વેરી શિમને પસંદ કરવા માટે અપૂર્ણ અને ટિપ્પણી કરેલ કોડનો સમાવેશ કર્યો છે જે હોવરિંગનું અનુકરણ કરતા ટચ ડિવાઇસ બ્રાઉઝર્સમાં હોવર શૈલીઓને અક્ષમ કરશે. આ કાર્ય ક્યારેય પૂર્ણપણે પૂર્ણ અથવા સક્ષમ કરવામાં આવ્યું ન હતું, પરંતુ સંપૂર્ણ ભંગાણ ટાળવા માટે, અમે આ શિમને અવમૂલ્યન કરવાનું પસંદ કર્યું છે અને સ્યુડો-ક્લાસ માટે શૉર્ટકટ્સ તરીકે મિક્સિન રાખવાનું પસંદ કર્યું છે.

પ્રિન્ટીંગ

કેટલાક આધુનિક બ્રાઉઝર્સમાં પણ, પ્રિન્ટિંગ વિચિત્ર હોઈ શકે છે.

Safari v8.0 મુજબ, નિશ્ચિત-પહોળાઈના .containerવર્ગનો ઉપયોગ સફારીને પ્રિન્ટ કરતી વખતે અસામાન્ય રીતે નાના ફોન્ટ સાઇઝનો ઉપયોગ કરવાનું કારણ બની શકે છે. વધુ વિગતો માટે અંક #14868 અને વેબકિટ બગ #138192 જુઓ. એક સંભવિત ઉકેલ નીચેની CSS છે:

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

એન્ડ્રોઇડ સ્ટોક બ્રાઉઝર

બૉક્સની બહાર, Android 4.1 (અને દેખીતી રીતે કેટલીક નવી રિલીઝ પણ) બ્રાઉઝર એપ્લિકેશન સાથે પસંદગીના ડિફોલ્ટ વેબ બ્રાઉઝર તરીકે મોકલે છે (ક્રોમથી વિપરીત). કમનસીબે, બ્રાઉઝર એપ્લિકેશનમાં સામાન્ય રીતે CSS સાથે ઘણી બધી બગ્સ અને અસંગતતાઓ છે.

મેનુ પસંદ કરો

તત્વો પર <select>, Android સ્ટોક બ્રાઉઝર બાજુના નિયંત્રણો પ્રદર્શિત કરશે નહીં જો ત્યાં કોઈ border-radiusઅને/અથવા borderલાગુ હોય. ( વિગતો માટે આ સ્ટેકઓવરફ્લો પ્રશ્ન<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>

ઉદાહરણ જોવા માંગો છો? આ JS બિન ડેમો તપાસો.

માન્યકર્તાઓ

જૂના અને બગડેલ બ્રાઉઝર્સને શ્રેષ્ઠ સંભવિત અનુભવ પ્રદાન કરવા માટે, બુટસ્ટ્રેપ બ્રાઉઝર્સમાં જ બગ્સની આસપાસ કામ કરવા માટે ચોક્કસ બ્રાઉઝર વર્ઝન માટે વિશિષ્ટ CSS ને લક્ષ્ય બનાવવા માટે ઘણી જગ્યાએ CSS બ્રાઉઝર હેક્સનો ઉપયોગ કરે છે. આ હેક્સ સમજી શકાય તે રીતે CSS માન્યકર્તાઓને ફરિયાદ કરે છે કે તેઓ અમાન્ય છે. કેટલાક સ્થળોએ, અમે બ્લીડિંગ-એજ CSS સુવિધાઓનો પણ ઉપયોગ કરીએ છીએ જે હજુ સુધી સંપૂર્ણ પ્રમાણિત નથી, પરંતુ તેનો ઉપયોગ પ્રગતિશીલ વૃદ્ધિ માટે થાય છે.

આ માન્યતા ચેતવણીઓ વ્યવહારમાં કોઈ વાંધો નથી કારણ કે અમારા CSS નો બિન-હેકી ભાગ સંપૂર્ણપણે માન્ય કરે છે અને હેકી ભાગો બિન-હેકી ભાગની યોગ્ય કામગીરીમાં દખલ કરતા નથી, તેથી શા માટે અમે આ ચોક્કસ ચેતવણીઓને જાણીજોઈને અવગણીએ છીએ.

ચોક્કસ ફાયરફોક્સ બગ માટેના ઉકેલના અમારા સમાવેશને કારણે અમારા HTML દસ્તાવેજોમાં પણ કેટલીક તુચ્છ અને અસંગત HTML માન્યતા ચેતવણીઓ છે .