Source

ဘရောက်ဆာများနှင့် စက်များ

Bootstrap မှ ပံ့ပိုးပေးထားသည့် ခေတ်မီသည့်အထိ ခေတ်မီသည့်အထိ၊ တစ်ခုစီအတွက် သိထားသည့် ထူးဆန်းသော ကွက်လပ်များနှင့် ချွတ်ယွင်းချက်များ အပါအဝင် ဘရောက်ဆာများနှင့် စက်ပစ္စည်းများအကြောင်း လေ့လာပါ။

ပံ့ပိုးထားသောဘရောက်ဆာများ

Bootstrap သည် အဓိက ဘရောက်ဆာများနှင့် ပလက်ဖောင်းများအားလုံး၏ နောက်ဆုံးထွက်၊ တည်ငြိမ်သော ဖြန့်ချိမှုများကို ပံ့ပိုးပေးပါသည်။ Windows တွင်၊ ကျွန်ုပ်တို့သည် Internet Explorer 10-11 / Microsoft Edge ကို ပံ့ပိုးပေးသည် ။

WebKit၊ Blink၊ သို့မဟုတ် Gecko ၏ နောက်ဆုံးဗားရှင်းကို အသုံးပြုသည့် အခြားဘရောက်ဆာများကို တိုက်ရိုက် သို့မဟုတ် ပလပ်ဖောင်း၏ ဝဘ်မြင်ကွင်း 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"
]

ဤဘရောက်ဆာဗားရှင်းများကိုစီမံခန့်ခွဲရန် Browserslist ကို အသုံးပြုသည့် CSS ရှေ့ဆက်များမှတစ်ဆင့် ရည်ရွယ်ထားသောဘရောက်ဆာပံ့ပိုးမှုကို ကိုင်တွယ်ရန် Autoprefixer ကို အသုံးပြု ပါသည်။ ဤကိရိယာများကို သင့်ပရောဂျက်များတွင် မည်သို့ပေါင်းစည်းရမည်ကို ၎င်းတို့၏စာရွက်စာတမ်းများကို တိုင်ပင်ပါ။

မိုဘိုင်းကိရိယာများ

ယေဘုယျအားဖြင့်ပြောရလျှင်၊ Bootstrap သည် အဓိကပလပ်ဖောင်းတစ်ခုစီ၏ မူရင်းဘရောက်ဆာများ၏ နောက်ဆုံးဗားရှင်းများကို ပံ့ပိုးပေးသည်။ ပရောက်စီဘရောက်ဆာများ (ဥပမာ Opera Mini၊ Opera Mobile ၏ Turbo မုဒ်၊ UC Browser Mini၊ Amazon Silk) ကို ပံ့ပိုးမထားကြောင်း သတိပြုပါ။

ရုန်းတယ်။ Firefox ဆာဖာရီ Android ဘရောက်ဆာနှင့် WebView Microsoft Edge
Android ပါ။ ထောက်ပံ့သည်။ ထောက်ပံ့သည်။ မရှိ Android v5.0+ ကို ပံ့ပိုးထားသည်။ ထောက်ပံ့သည်။
iOS ပါ။ ထောက်ပံ့သည်။ ထောက်ပံ့သည်။ ထောက်ပံ့သည်။ မရှိ ထောက်ပံ့သည်။
Windows 10 မိုဘိုင်း မရှိ မရှိ မရှိ မရှိ ထောက်ပံ့သည်။

ဒက်စ်တော့ဘရောက်ဆာများ

အလားတူ၊ ဒက်စတော့ဘရောက်ဆာအများစု၏ နောက်ဆုံးဗားရှင်းများကို ပံ့ပိုးထားသည်။

ရုန်းတယ်။ Firefox Internet Explorer Microsoft Edge အော်ပရာ ဆာဖာရီ
မက် ထောက်ပံ့သည်။ ထောက်ပံ့သည်။ မရှိ မရှိ ထောက်ပံ့သည်။ ထောက်ပံ့သည်။
ပြတင်းပေါက် ထောက်ပံ့သည်။ ထောက်ပံ့သည်။ IE10+ ကို ပံ့ပိုးထားသည်။ ထောက်ပံ့သည်။ ထောက်ပံ့သည်။ မထောက်ခံပါ။

Firefox အတွက်၊ နောက်ဆုံးထွက် ပုံမှန်တည်ငြိမ်သော ထုတ်ဝေမှုအပြင်၊ Firefox ၏ နောက်ဆုံးထွက် ပံ့ပိုးကူညီမှု ဖြန့်ချိမှု (ESR) ဗားရှင်းကိုလည်း ကျွန်ုပ်တို့ ပံ့ပိုး ပေးပါသည်။

တရားဝင်မဟုတ်သောအားဖြင့်၊ Bootstrap သည် Linux အတွက် Chromium နှင့် Chrome၊ Linux အတွက် Firefox နှင့် Internet Explorer 9 တို့တွင် လုံလောက်စွာကြည့်ရှုပြီး ပြုမူသင့်သည်။

Bootstrap နှင့် ကိုင်တွယ်ဖြေရှင်းရမည့် ဘရောက်ဆာ ချို့ယွင်းချက်အချို့စာရင်းအတွက်၊ ကျွန်ုပ်တို့၏ Wall of browser bugs ကိုကြည့်ပါ ။

Internet Explorer

Internet Explorer 10+ ကို ပံ့ပိုးထားသည်။ IE9 နဲ့ down မဟုတ်ပါဘူး။ အချို့သော CSS3 ဂုဏ်သတ္တိများနှင့် HTML5 ဒြပ်စင်များကို IE10 တွင် အပြည့်အဝ မပံ့ပိုးနိုင်ပါ သို့မဟုတ် လုပ်ဆောင်နိုင်စွမ်း အပြည့်အတွက် ရှေ့ပြေးဂုဏ်သတ္တိများ လိုအပ်ကြောင်း ကျေးဇူးပြု၍ သတိပြုပါ။ CSS3 နှင့် HTML5 အင်္ဂါရပ်များ၏ ဘရောက်ဆာပံ့ပိုးမှုဆိုင်ရာ အသေးစိတ်အချက်အလက်များအတွက် ကျွန်ုပ် သုံးနိုင် ပါသလား… ။

IE8-9 ပံ့ပိုးကူညီမှု လိုအပ်ပါက၊ Bootstrap 3 ကို အသုံးပြုပါ။ ၎င်းသည် ကျွန်ုပ်တို့၏ကုဒ်၏ အတည်ငြိမ်ဆုံးဗားရှင်းဖြစ်ပြီး အရေးကြီးသော ချွတ်ယွင်းချက်များနှင့် စာရွက်စာတမ်းပြောင်းလဲမှုများအတွက် ကျွန်ုပ်တို့အဖွဲ့မှ ပံ့ပိုးပေးနေဆဲဖြစ်သည်။ သို့သော်လည်း ၎င်းတွင် အင်္ဂါရပ်အသစ်များကို ထည့်သွင်းမည်မဟုတ်ပါ။

မိုဘိုင်းပေါ်ရှိ မော်ဒယ်များနှင့် ကွက်လပ်များ

လျှံတက်လာပြီး လှိမ့်လိုက်

overflow: hidden;ဒြပ်စင်ပေါ် ရှိ ပံ့ပိုး <body>မှုသည် iOS နှင့် Android တို့တွင် အတော်လေး အကန့်အသတ်ရှိသည်။ ယင်းအတွက်၊ သင်သည် ထိုကိရိယာများ၏ ဘရောက်ဆာများထဲမှ modal တစ်ခု၏ အပေါ် သို့မဟုတ် အောက်ခြေကို ကျော်သွားသောအခါ၊ <body>အကြောင်းအရာသည် စတင်လှိမ့်မည်ဖြစ်သည်။ Chrome bug #175502 (Chrome v40 တွင် ပြင်ဆင်ထားသည်) နှင့် WebKit bug #153852 ကိုကြည့်ပါ ။

iOS စာသားအကွက်များနှင့် လှိမ့်ခြင်း။

<input>iOS 9.2 တွင် modal တစ်ခုကို ဖွင့်ထားစဉ်တွင်၊ scroll gesture တစ်ခု၏ ကနဦးထိတွေ့မှုသည် textual သို့မဟုတ် a ၏ နယ်နိမိတ်အတွင်းတွင် ရှိနေပါက <textarea>၊ <body>modal အောက်ရှိ အကြောင်းအရာသည် modal ကိုယ်တိုင်အစား လှိမ့်မည်ဖြစ်သည်။ WebKit bug #153856 ကိုကြည့်ပါ ။

z-indexing ၏ .dropdown-backdropရှုပ်ထွေးမှုကြောင့် nav တွင်ဒြပ်စင်ကို iOS တွင်အသုံးမပြုပါ။ ထို့ကြောင့်၊ navbars တွင် dropdowns များကိုပိတ်ရန်၊ သင်သည် dropdown element (သို့မဟုတ် iOS တွင် click event ကိုဖွင့်မည့်အခြားဒြပ်စင် ) ကိုတိုက်ရိုက်နှိပ်ရပါမည် ။

ဘရောင်ဇာချဲ့ခြင်း။

စာမျက်နှာကို ဇူးမ်ဆွဲခြင်းသည် Bootstrap နှင့် အခြားဝဘ်၏ အခြားအစိတ်အပိုင်းများတွင် အချို့သော အစိတ်အပိုင်းများတွင် သရုပ်ဖော်ခြင်းကို မလွှဲမရှောင်သာ တင်ဆက်သည်။ ပြဿနာပေါ် မူတည်၍ ကျွန်ုပ်တို့က ၎င်းကို ပြင်နိုင်သည် (လိုအပ်ပါက ပြဿနာကို ဦးစွာရှာဖွေပြီးနောက် ဖွင့်ပါ)။ သို့သော်၊ ၎င်းတို့သည် ဟက်ကာဖြေရှင်းခြင်းမှလွဲ၍ တိုက်ရိုက်ဖြေရှင်းချက်မရှိသောကြောင့် ၎င်းတို့ကို လျစ်လျူရှုလေ့ရှိသည်။

Sticky :hover/ :focusiOS တွင်

:hoverထိတွေ့စက်ပစ္စည်းအများစုတွင် မဖြစ်နိုင် သော်လည်း ၊ iOS သည် ဤအပြုအမူကို အတုယူကာ အစိတ်အပိုင်းတစ်ခုအား တို့ပြီးနောက် ဆက်လက်တည်ရှိနေသည့် "စေးကပ်သော" ဟူသည့်ပုံစံများကို ဖြစ်ပေါ်စေသည်။ အသုံးပြုသူများသည် အခြားဒြပ်စင်ကိုနှိပ်သောအခါမှသာ ဤမိုးပျံစတိုင်များကို ဖယ်ရှားပါမည်။ ဤအပြုအမူသည် အလွန်မလိုလားအပ်ဟု ယူဆရပြီး Android သို့မဟုတ် Windows စက်ပစ္စည်းများတွင် ပြဿနာမဟုတ်ပုံပေါ်သည်။

ကျွန်ုပ်တို့၏ v4 အယ်လ်ဖာနှင့် ဘီတာ ထုတ်ဝေမှုများတစ်လျှောက်တွင်၊ ကျွန်ုပ်တို့သည် မပြည့်စုံသော ကုဒ်ကို ထည့်သွင်းပြီး ပျံဝဲနေသည့် ထိတွေ့စက်ပစ္စည်းဘရောက်ဆာများတွင် ပျံဝဲနေသော ခလုတ်များကို အတုယူသည့် ခလုတ်ခုံပုံစံများကို ပိတ်မည့် မီဒီယာမေးမြန်းချက် shim ကို ရွေးချယ်ရန်အတွက် ကုဒ်ကို မှတ်ချက်ပေးခဲ့သည်။ ဤလုပ်ငန်းသည် အပြည့်အဝ ပြီးမြောက်ခြင်း သို့မဟုတ် ဖွင့်ထားခြင်းမရှိသော်လည်း လုံးဝပြိုကွဲခြင်းမှ ရှောင်ရှားနိုင်ရန်၊ ကျွန်ုပ်တို့သည် ဤ shim ကို ဆန့ ်ကျင်ပြီး mixins များကို pseudo-classes အတွက် ဖြတ်လမ်းများအဖြစ် ထားရှိထားပါသည်။

ပုံနှိပ်ခြင်း။

အချို့သော ခေတ်မီဘရောက်ဆာများတွင်ပင် ပရင့်ထုတ်ခြင်းသည် ထူးဆန်းနိုင်သည်။

Safari v8.0 အရ၊ ပုံသေအကျယ် .containerအတန်းကိုအသုံးပြုခြင်းသည် Safari ကိုပုံနှိပ်သောအခါတွင် ပုံမှန်မဟုတ်သောသေးငယ်သောဖောင့်အရွယ်အစားကိုအသုံးပြုစေနိုင်သည်။ အသေးစိတ် အချက်အလက်များအတွက် ပြဿနာ #14868 နှင့် WebKit bug #138192 ကို ကြည့်ပါ။ ဖြစ်နိုင်ချေရှိသော ဖြေရှင်းနည်းတစ်ခုမှာ အောက်ပါ CSS ဖြစ်သည်။

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

Android စတော့ဘရောက်ဆာ

အကွက်အပြင်တွင်၊ Android 4.1 (နှင့် အချို့သော အသစ်ထွက်ရှိမှုများပင်) သည် ရွေးချယ်မှု၏ မူရင်းဝဘ်ဘရောက်ဆာ (Chrome နှင့် ဆန့်ကျင်ဘက်) အဖြစ် Browser အက်ပ်ကို ပို့ဆောင်ပေးပါသည်။ ကံမကောင်းစွာဖြင့်၊ Browser အက်ပ်တွင် ယေဘုယျအားဖြင့် CSS နှင့် ရှေ့နောက်မညီသော ချို့ယွင်းချက်များစွာရှိသည်။

မီနူးကို ရွေးပါ။

ဒြပ်စင်များတွင် ၊ Android စတော့ဘရောက်ဆာသည် နှင့်/သို့မဟုတ် အသုံးပြု <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 သရုပ်ပြကိုကြည့်ပါ။

အတည်ပြုသူများ

ဟောင်းပြီး ဘာဂီဘရောက်ဆာများအတွက် အကောင်းဆုံးဖြစ်နိုင်ချေရှိသော အတွေ့အကြုံကို ပေးစွမ်းရန်အတွက်၊ Bootstrap သည် ဘရောက်ဆာများအတွင်းရှိ bug များကို ၎င်းတို့ကိုယ်တိုင်လုပ်ဆောင်ရန်အတွက် အချို့သောဘရောက်ဆာဗားရှင်းများသို့ အထူး CSS အား ပစ်မှတ်ထားရန် နေရာများစွာတွင် CSS ဘရောက်ဆာ ဟက်ခ်များကို အသုံးပြုပါသည်။ ဤဟက်ကာများသည် CSS စစ်ဆေးမှုအား ၎င်းတို့မမှန်ကန်ကြောင်း တိုင်ကြားရန် နားလည်သဘောပေါက်စေသည်။ အချို့နေရာများတွင် ကျွန်ုပ်တို့သည် စံချိန်စံညွှန်းမပြည့်မီသေးသော bleeding-edge CSS အင်္ဂါရပ်များကိုလည်း အသုံးပြုသည်၊ သို့သော် ၎င်းတို့ကို တိုးတက်မှုအဆင့်မြှင့်တင်ရန်အတွက် သက်သက်အသုံးပြုပါသည်။

ကျွန်ုပ်တို့၏ CSS ၏ hacky မဟုတ်သောအပိုင်းသည် အပြည့်အဝ တရားဝင်ကြောင်းနှင့် hacky အပိုင်းများသည် ဟက်ကင်းမဟုတ်သောအပိုင်း၏ သင့်လျော်သောလုပ်ဆောင်မှုကို အနှောင့်အယှက်မပေးသည့်အတွက်ကြောင့် ဤတရားဝင်သောသတိပေးချက်များသည် လက်တွေ့တွင် အရေးမကြီးပါ။

ကျွန်ုပ်တို့၏ HTML docs တွင်လည်း အချို့သော အသေးအဖွဲ နှင့် အကျိုးမရှိသော HTML တရားဝင်ကြောင်း သတိပေးချက်များ အချို့သည် Firefox တွင် ချို့ယွင်းချက် တစ်ခုအတွက် ဖြေရှင်းချက်တစ်ခု ပါဝင်နေသောကြောင့် ဖြစ်သည်။