బ్రౌజర్‌లు మరియు పరికరాలు
బ్రౌజర్‌లు మరియు పరికరాల గురించి, ఆధునిక నుండి పాత వరకు, బూట్‌స్ట్రాప్ ద్వారా మద్దతిచ్చే ప్రతిదానికీ తెలిసిన క్విర్క్‌లు మరియు బగ్‌ల గురించి తెలుసుకోండి.
మద్దతు ఉన్న బ్రౌజర్‌లు
బూట్‌స్ట్రాప్ అన్ని ప్రధాన బ్రౌజర్‌లు మరియు ప్లాట్‌ఫారమ్‌ల తాజా, స్థిరమైన విడుదలలకు మద్దతు ఇస్తుంది. Windowsలో, మేము Internet Explorer 10-11 / Microsoft Edgeకి మద్దతిస్తాము .
వెబ్‌కిట్, బ్లింక్ లేదా గెక్కో యొక్క తాజా వెర్షన్‌ను ఉపయోగించే ప్రత్యామ్నాయ బ్రౌజర్‌లు, నేరుగా లేదా ప్లాట్‌ఫారమ్ యొక్క వెబ్ వీక్షణ API ద్వారా, స్పష్టంగా మద్దతు ఇవ్వవు. అయితే, బూట్‌స్ట్రాప్ (చాలా సందర్భాలలో) ఈ బ్రౌజర్‌లలో కూడా సరిగ్గా ప్రదర్శించబడాలి మరియు పని చేయాలి. మరింత నిర్దిష్టమైన మద్దతు సమాచారం క్రింద అందించబడింది.
మీరు మా మద్దతు ఉన్న బ్రౌజర్‌ల శ్రేణిని మరియు వాటి వెర్షన్‌లను మాలో కనుగొనవచ్చు.browserslistrc file :
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
ఈ బ్రౌజర్ వెర్షన్‌లను నిర్వహించడానికి బ్రౌజర్‌ల జాబితాను ఉపయోగించే CSS ప్రిఫిక్స్‌ల ద్వారా ఉద్దేశించిన బ్రౌజర్ మద్దతును నిర్వహించడానికి మేము Autoprefixer ని ఉపయోగిస్తాము. మీ ప్రాజెక్ట్‌లలో ఈ సాధనాలను ఎలా ఇంటిగ్రేట్ చేయాలో వారి డాక్యుమెంటేషన్‌ను సంప్రదించండి.
మొబైల్ పరికరాలు
సాధారణంగా చెప్పాలంటే, బూట్‌స్ట్రాప్ ప్రతి ప్రధాన ప్లాట్‌ఫారమ్ యొక్క డిఫాల్ట్ బ్రౌజర్‌ల యొక్క తాజా వెర్షన్‌లకు మద్దతు ఇస్తుంది. ప్రాక్సీ బ్రౌజర్‌లు (Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk వంటివి) సపోర్ట్ చేయవని గమనించండి.
| Chrome | ఫైర్‌ఫాక్స్ | సఫారి | Android బ్రౌజర్ & WebView | మైక్రోసాఫ్ట్ ఎడ్జ్ | |
|---|---|---|---|---|---|
| ఆండ్రాయిడ్ | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు | N/A | Android v5.0+ మద్దతు | మద్దతు ఇచ్చారు |
| iOS | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు | N/A | మద్దతు ఇచ్చారు |
| Windows 10 మొబైల్ | N/A | N/A | N/A | N/A | మద్దతు ఇచ్చారు |
డెస్క్‌టాప్ బ్రౌజర్‌లు
అదేవిధంగా, చాలా డెస్క్‌టాప్ బ్రౌజర్‌ల యొక్క తాజా వెర్షన్‌లకు మద్దతు ఉంది.
| Chrome | ఫైర్‌ఫాక్స్ | ఇంటర్నెట్ ఎక్స్ ప్లోరర్ | మైక్రోసాఫ్ట్ ఎడ్జ్ | Opera | సఫారి | |
|---|---|---|---|---|---|---|
| Mac | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు | N/A | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు |
| విండోస్ | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు | మద్దతు, IE10+ | మద్దతు ఇచ్చారు | మద్దతు ఇచ్చారు | మద్దతు ఇవ్వ లేదు |
Firefox కోసం, తాజా సాధారణ స్థిరమైన విడుదలతో పాటు, Firefox యొక్క తాజా ఎక్స్‌టెండెడ్ సపోర్ట్ రిలీజ్ (ESR) వెర్షన్‌కు కూడా మేము మద్దతు ఇస్తున్నాము.
అనధికారికంగా, బూట్‌స్ట్రాప్ Linux కోసం Chromium మరియు Chrome, Linux కోసం Firefox మరియు Internet Explorer 9లో అధికారికంగా మద్దతు ఇవ్వనప్పటికీ, తగినంతగా కనిపించాలి మరియు ప్రవర్తించాలి.
బూట్‌స్ట్రాప్‌తో పోరాడాల్సిన కొన్ని బ్రౌజర్ బగ్‌ల జాబితా కోసం, మా బ్రౌజర్ బగ్‌ల గోడను చూడండి .
ఇంటర్నెట్ ఎక్స్ ప్లోరర్
Internet Explorer 10+ మద్దతు ఉంది; IE9 మరియు డౌన్ కాదు. దయచేసి కొన్ని CSS3 లక్షణాలు మరియు HTML5 మూలకాలు IE10లో పూర్తిగా మద్దతివ్వడం లేదని లేదా పూర్తి కార్యాచరణ కోసం ఉపసర్గ లక్షణాలు అవసరమని గుర్తుంచుకోండి. CSS3 మరియు HTML5 ఫీచర్‌ల బ్రౌజర్ మద్దతుపై వివరాల కోసం నేను ఉపయోగించవచ్చా... ని సందర్శించండి . మీకు IE8-9 మద్దతు అవసరమైతే, బూట్‌స్ట్రాప్ 3ని ఉపయోగించండి.
మొబైల్‌లో మోడల్‌లు మరియు డ్రాప్‌డౌన్‌లు
ఓవర్‌ఫ్లో మరియు స్క్రోలింగ్
overflow: hidden;మూలకంపై మద్దతు <body>iOS మరియు Androidలో చాలా పరిమితంగా ఉంది. ఆ క్రమంలో, మీరు ఆ పరికరాల బ్రౌజర్‌లలో దేనిలోనైనా మోడల్ ఎగువన లేదా దిగువన స్క్రోల్ చేసినప్పుడు, <body>కంటెంట్ స్క్రోల్ చేయడం ప్రారంభమవుతుంది. Chrome బగ్ #175502 ( Chrome v40లో పరిష్కరించబడింది) మరియు WebKit బగ్ #153852 చూడండి .
iOS టెక్స్ట్ ఫీల్డ్‌లు మరియు స్క్రోలింగ్
<input>iOS 9.2 నాటికి, మోడల్ తెరిచి ఉన్నప్పుడు, స్క్రోల్ సంజ్ఞ యొక్క ప్రారంభ స్పర్శ టెక్స్ట్ లేదా a యొక్క సరిహద్దులో ఉంటే , మోడల్‌కు బదులుగా మోడల్ కింద ఉన్న కంటెంట్ స్క్రోల్ చేయబడుతుంది <textarea>. WebKit బగ్ #153856<body> చూడండి .
Navbar డ్రాప్‌డౌన్‌లు
.dropdown-backdropz-ఇండెక్సింగ్ సంక్లిష్టత కారణంగా navలో iOSలో మూలకం ఉపయోగించబడదు . కాబట్టి, నావ్‌బార్‌లలో డ్రాప్‌డౌన్‌లను మూసివేయడానికి, మీరు నేరుగా డ్రాప్‌డౌన్ ఎలిమెంట్‌పై క్లిక్ చేయాలి (లేదా iOSలో క్లిక్ ఈవెంట్‌ను కాల్చే ఏదైనా ఇతర మూలకం ).
బ్రౌజర్ జూమ్ చేస్తోంది
పేజీ జూమింగ్ అనివార్యంగా బూట్‌స్ట్రాప్ మరియు వెబ్‌లోని మిగిలిన భాగాలలో రెండరింగ్ ఆర్టిఫ్యాక్ట్‌లను అందిస్తుంది. సమస్యను బట్టి, మేము దాన్ని పరిష్కరించగలము (మొదట శోధించండి మరియు అవసరమైతే సమస్యను తెరవండి). అయినప్పటికీ, మేము వీటిని తరచుగా విస్మరిస్తాము ఎందుకంటే వాటికి హ్యాకీ పరిష్కారాలు తప్ప వేరే ప్రత్యక్ష పరిష్కారం ఉండదు.
స్టిక్కీ :hover/ :focusiOSలో
: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 స్టాక్ బ్రౌజర్ సైడ్ కంట్రోల్‌లను ప్రదర్శించదు border-radiusమరియు/లేదా borderవర్తింపజేస్తుంది. (వివరాల కోసం ఈ StackOverflow ప్రశ్నను చూడండి .) ఆక్షేపణీయ 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>ఒక ఉదాహరణ చూడాలనుకుంటున్నారా? ఈ JS బిన్ డెమోని చూడండి .
వాలిడేటర్లు
పాత మరియు బగ్గీ బ్రౌజర్‌లకు సాధ్యమైనంత ఉత్తమమైన అనుభవాన్ని అందించడానికి, బూట్‌స్ట్రాప్ అనేక ప్రదేశాలలో CSS బ్రౌజర్ హ్యాక్‌లను ఉపయోగిస్తుంది, బ్రౌజర్‌లలోని బగ్‌ల చుట్టూ పని చేయడానికి నిర్దిష్ట బ్రౌజర్ వెర్షన్‌లకు ప్రత్యేక CSSని లక్ష్యంగా చేసుకుంటుంది. ఈ హ్యాక్‌లు అర్థం చేసుకోగలిగే విధంగా CSS వ్యాలిడేటర్‌లు అవి చెల్లవని ఫిర్యాదు చేస్తాయి. రెండు ప్రదేశాలలో, మేము ఇంకా పూర్తిగా ప్రామాణికం కాని రక్తస్రావం-అంచు CSS లక్షణాలను కూడా ఉపయోగిస్తాము, కానీ ఇవి పూర్తిగా ప్రగతిశీల మెరుగుదల కోసం ఉపయోగించబడతాయి.
ఈ ధ్రువీకరణ హెచ్చరికలు ఆచరణలో పట్టింపు లేదు ఎందుకంటే మా CSS యొక్క నాన్-హ్యాకీ భాగం పూర్తిగా ధృవీకరించబడుతుంది మరియు హ్యాకీ భాగాలు నాన్-హ్యాకీ భాగం యొక్క సరైన పనితీరుకు అంతరాయం కలిగించవు, అందుకే మేము ఈ ప్రత్యేక హెచ్చరికలను ఎందుకు విస్మరిస్తాము.
మా HTML డాక్స్ కూడా ఒక నిర్దిష్ట Firefox బగ్ కోసం ఒక ప్రత్యామ్నాయాన్ని చేర్చడం వలన కొన్ని చిన్నవిషయమైన మరియు అసంగతమైన HTML ధ్రువీకరణ హెచ్చరికలను కలిగి ఉన్నాయి .