Source

බ්‍රව්සර් සහ උපාංග

Bootstrap මගින් සහය දක්වන නවීන සිට පැරණි දක්වා බ්‍රවුසර සහ උපාංග ගැන දැන ගන්න, එක් එක් සඳහා දන්නා quirks සහ bugs ඇතුළුව.

සහාය දක්වන බ්‍රව්සර්

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 භාවිත කරමු. මෙම මෙවලම් ඔබේ ව්‍යාපෘතිවලට ඒකාබද්ධ කරන්නේ කෙසේද යන්න සඳහා ඔවුන්ගේ ලේඛන බලන්න.

ජංගම උපාංග

සාමාන්‍යයෙන් කිවහොත්, Bootstrap එක් එක් ප්‍රධාන වේදිකාවේ පෙරනිමි බ්‍රව්සර්වල නවතම අනුවාද සඳහා සහය දක්වයි. ප්‍රොක්සි බ්‍රව්සර් (ඔපෙරා මිනි, ඔපෙරා මොබයිල් හි ටර්බෝ මාදිලිය, යූසී බ්‍රව්සර් මිනි, ඇමේසන් සිල්ක් වැනි) සහය නොදක්වන බව සලකන්න.

Chrome ෆයර්ෆොක්ස් සෆාරි Android බ්‍රව්සරය සහ WebView Microsoft Edge
ඇන්ඩ්රොයිඩ් සහාය දුන්නා සහාය දුන්නා N/A Android v5.0+ සහය දක්වයි සහාය දුන්නා
iOS සහාය දුන්නා සහාය දුන්නා සහාය දුන්නා N/A සහාය දුන්නා
Windows 10 ජංගම N/A N/A N/A N/A සහාය දුන්නා

ඩෙස්ක්ටොප් බ්‍රව්සර්

ඒ හා සමානව, බොහෝ ඩෙස්ක්ටොප් බ්‍රව්සර්වල නවතම අනුවාද සඳහා සහය දක්වයි.

Chrome ෆයර්ෆොක්ස් අන්තර්ජාල ගවේෂකය Microsoft Edge ඔපෙරා සෆාරි
Mac සහාය දුන්නා සහාය දුන්නා N/A N/A සහාය දුන්නා සහාය දුන්නා
වින්ඩෝස් සහාය දුන්නා සහාය දුන්නා සහය දක්වයි, IE10+ සහාය දුන්නා සහාය දුන්නා සහාය නොදක්වයි

Firefox සඳහා, නවතම සාමාන්‍ය ස්ථායී නිකුතුවට අමතරව, අපි Firefox හි නවතම Extended Support Release (ESR) අනුවාදයට ද සහය දෙමු.

නිල නොවන ලෙස, Bootstrap Chromium සහ Linux සඳහා Chrome, Linux සඳහා Firefox, සහ Internet Explorer 9, නිල වශයෙන් සහය නොදක්වන නමුත්, ප්‍රමාණවත් ලෙස පෙනීම සහ හැසිරිය යුතුය.

Bootstrap සමඟ පොරබදන්නට ඇති සමහර බ්‍රව්සර් දෝෂ ලැයිස්තුවක් සඳහා, අපගේ බ්‍රව්සර් දෝෂ වල බිත්තිය බලන්න .

අන්තර්ජාල ගවේෂකය

Internet Explorer 10+ සහය දක්වයි; IE9 සහ පහළ නොවේ. සමහර CSS3 ගුණාංග සහ HTML5 මූලද්‍රව්‍ය IE10 හි සම්පූර්ණයෙන් සහාය නොදක්වන බව කරුණාවෙන් සලකන්න, නැතහොත් සම්පූර්ණ ක්‍රියාකාරීත්වය සඳහා උපසර්ග ගුණාංග අවශ්‍ය වේ. CSS3 සහ HTML5 විශේෂාංග වල බ්‍රවුසර සහාය පිළිබඳ විස්තර සඳහා මම භාවිතා කළ හැකිද... වෙත පිවිසෙන්න .

ඔබට IE8-9 සහාය අවශ්‍ය නම්, Bootstrap 3 භාවිතා කරන්න. එය අපගේ කේතයේ වඩාත්ම ස්ථායී අනුවාදය වන අතර විවේචනාත්මක දෝෂ නිවැරදි කිරීම් සහ ලේඛන වෙනස් කිරීම් සඳහා අපගේ කණ්ඩායම විසින් තවමත් සහාය දක්වයි. කෙසේ වෙතත්, එයට නව විශේෂාංග එකතු නොකෙරේ.

ජංගම දුරකථනයේ මාදිලි සහ පතන

පිටාර ගැලීම සහ අනුචලනය

overflow: hidden;IOS සහ Android හි මූලද්‍රව්‍ය සඳහා සහය <body>තරමක් සීමිතය. ඒ සඳහා, ඔබ එම උපාංග බ්‍රවුසර දෙකෙන් මොඩලයක ඉහළ හෝ පහළ පසුකර යන විට, <body>අන්තර්ගතය අනුචලනය වීමට පටන් ගනී. Chrome දෝෂය #175502 ( Chrome v40 හි නිවැරදි කර ඇත) සහ WebKit දෝෂය #153852 බලන්න .

iOS පෙළ ක්ෂේත්‍ර සහ අනුචලනය

iOS 9.2 ට අනුව, මාදිලියක් විවෘතව පවතින අතර, අනුචලන අභිනයක ආරම්භක ස්පර්ශය පාඨමය <input>හෝ a හි මායිම තුළ තිබේ නම්, මාදිලිය වෙනුවට මොඩලයට යටින් ඇති අන්තර්ගතය අනුචලනය වේ <textarea>. WebKit දෝෂ #153856<body> බලන්න .

.dropdown-backdropZ-සුචිගත කිරීමේ සංකීර්ණත්වය නිසා මෙම මූලද්‍රව්‍යය nav හි iOS මත භාවිතා නොවේ. මේ අනුව, navbars හි dropdowns වැසීමට, ඔබ dropdown මූලද්‍රව්‍යය කෙලින්ම ක්ලික් කළ යුතුය (හෝ iOS හි ක්ලික් සිදුවීමක් සිදු කරන වෙනත් ඕනෑම අංගයක් ).

බ්‍රව්සරය විශාලනය කිරීම

පිටු විශාලනය අනිවාර්යයෙන්ම Bootstrap සහ වෙබයේ අනෙකුත් කොටස් දෙකෙහිම සමහර සංරචකවල විදැහුම්කරණ කෞතුක වස්තු ඉදිරිපත් කරයි. ගැටලුව මත පදනම්ව, අපට එය නිවැරදි කිරීමට හැකි විය හැකිය (පළමුව සොයන්න සහ අවශ්‍ය නම් ගැටළුවක් විවෘත කරන්න). කෙසේ වෙතත්, අපි මේවා නොසලකා හැරීමට නැඹුරු වන්නේ ඒවාට බොහෝ විට හැකිකි විසඳුම් හැර වෙනත් සෘජු විසඳුමක් නොමැති බැවිනි.

ඇලෙන සුළු :hover/ :focusiOS මත

බොහෝ :hoverස්පර්ශ උපාංගවල කළ නොහැකි වුවද, iOS මෙම හැසිරීම අනුකරණය කරයි, එහි ප්‍රතිඵලයක් ලෙස එක් මූලද්‍රව්‍යයක් තට්ටු කිරීමෙන් පසු පවතින “ඇලෙන” හෝවර් විලාසයන් ඇති වේ. පරිශීලකයන් වෙනත් මූලද්‍රව්‍යයක් තට්ටු කළ විට පමණක් මෙම hover මෝස්තර ඉවත් කෙරේ. මෙම හැසිරීම බොහෝ දුරට නුසුදුසු ලෙස සලකනු ලබන අතර Android හෝ Windows උපාංගවල ගැටලුවක් නොවන බව පෙනේ.

අපගේ v4 ඇල්ෆා සහ බීටා නිකුතු පුරාවටම, අපි අසම්පූර්ණ සහ අදහස් දැක්වු කේත මාධ්‍ය විමසුම් ෂිම් එකක් තෝරා ගැනීම සඳහා ඇතුළත් කළෙමු, එය සැරිසැරීම අනුකරණය කරන ස්පර්ශ උපාංග බ්‍රවුසරවල හෝවර් විලාසයන් අක්‍රීය කරයි. මෙම කාර්යය කිසි විටෙක සම්පූර්ණයෙන් සම්පූර්ණ කර හෝ සක්‍රිය කර නැත, නමුත් සම්පූර්ණ කැඩීම වැලැක්වීම සඳහා, අපි මෙම ෂිම් ඉවත් කිරීමට සහ ව්‍යාජ පන්ති සඳහා කෙටිමං ලෙස මිශ්‍රණය තබා ගැනීමට තෝරා ගත්තෙමු.

මුද්රණය කිරීම

සමහර නවීන බ්‍රව්සර්වල පවා මුද්‍රණය විචිත්‍රවත් විය හැකිය.

Safari v8.0 ලෙස, ස්ථාවර-පළල .containerපන්තිය භාවිතා කිරීම Safari හට මුද්‍රණය කිරීමේදී අසාමාන්‍ය ලෙස කුඩා අකුරු ප්‍රමාණයක් භාවිතා කිරීමට හේතු විය හැක. වැඩි විස්තර සඳහා #14868 නිකුතුව සහ WebKit දෝෂ #138192 බලන්න. එක් විභව විසඳුමක් පහත CSS වේ:

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

Android කොටස් බ්‍රව්සරය

කොටුවෙන් පිටත, ඇන්ඩ්‍රොයිඩ් 4.1 (සහ සමහර නව නිකුතු පෙනෙන පරිදි) බ්‍රව්සර් යෙදුම සමඟ පෙරනිමි වෙබ් බ්‍රව්සරය ලෙස (ක්‍රෝම් වලට ප්‍රතිවිරුද්ධව) නැව්ගත කරයි. අවාසනාවකට, බ්‍රවුසර් යෙදුමට සාමාන්‍යයෙන් CSS සමඟ බොහෝ දෝෂ සහ නොගැලපීම් ඇත.

මෙනුව තෝරන්න

මූලද්‍රව්‍ය මත , ඇන්ඩ්‍රොයිඩ් කොටස් බ්‍රවුසරය පැති පාලනයක් සහ/හෝ යෙදී <select>ඇත්නම් ඒවා ප්‍රදර්ශනය නොකරනු ඇත . (විස්තර සඳහා මෙම StackOverflow ප්‍රශ්නය බලන්න.) වැරදි CSS ඉවත් කිරීමට සහ Android කොටස් බ්‍රවුසරයේ මෝස්තර නොකළ අංගයක් ලෙස දැක්වීමට පහත කේත කොටස භාවිතා කරන්න. පරිශීලක නියෝජිතයා sniffing 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>

උදාහරණයක් බලන්න ඕනද? මෙම JS Bin demo එක බලන්න.

වලංගු කරන්නන්

පැරණි සහ දෝෂ සහිත බ්‍රවුසර සඳහා හැකි හොඳම අත්දැකීමක් ලබා දීම සඳහා, Bootstrap විසින් බ්‍රවුසරයේ ඇති දෝෂ සම්බන්ධයෙන් ක්‍රියා කිරීම සඳහා ඇතැම් බ්‍රවුසර අනුවාද සඳහා විශේෂ CSS ඉලක්ක කිරීමට ස්ථාන කිහිපයක CSS බ්‍රවුසර හැක් භාවිතා කරයි. මෙම හැක් කිරීම් CSS වලංගු කරන්නන් වලංගු නොවන බවට පැමිණිලි කිරීමට හේතු වේ. ස්ථාන කිහිපයකදී, අපි තවමත් සම්පූර්ණයෙන් ප්‍රමිතිගත කර නැති ලේ ගැලීම් සහිත CSS විශේෂාංග භාවිතා කරමු, නමුත් මේවා සම්පූර්ණයෙන්ම ප්‍රගතිශීලී වැඩිදියුණු කිරීම් සඳහා භාවිතා වේ.

අපගේ CSS හි අනවසර කොටස සම්පූර්ණයෙන් වලංගු වන බැවින් සහ හැකි නොවන කොටසෙහි නිසි ක්‍රියාකාරිත්වයට බාධා නොකරන බැවින් මෙම වලංගු කිරීමේ අනතුරු ඇඟවීම් ප්‍රායෝගිකව වැදගත් නොවේ, එබැවින් අපි මෙම විශේෂිත අනතුරු ඇඟවීම් හිතාමතාම නොසලකා හරින්නේ මන්ද යන්නයි.

අපගේ HTML ලේඛනවලද යම් යම් ෆයර්ෆොක්ස් දෝෂයක් සඳහා පිළියමක් ඇතුළත් කිරීම නිසා සුළු හා නොසැලකිලිමත් HTML වලංගු කිරීමේ අනතුරු ඇඟවීම් ඇත.