Source

កម្មវិធីរុករក និងឧបករណ៍

ស្វែងយល់អំពីកម្មវិធីរុករកតាមអ៊ីនធឺណិត និងឧបករណ៍ចាប់ពីទំនើបដល់ចាស់ ដែលត្រូវបានគាំទ្រដោយ Bootstrap រួមទាំង quirks និងកំហុសដែលគេស្គាល់សម្រាប់នីមួយៗ។

កម្មវិធីរុករកដែលគាំទ្រ

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"
]

យើងប្រើ Autoprefixer ដើម្បីគ្រប់គ្រងការគាំទ្រកម្មវិធីរុករកតាមបំណងតាមរយៈបុព្វបទ CSS ដែលប្រើ Browserslist ដើម្បីគ្រប់គ្រងកំណែកម្មវិធីរុករកតាមអ៊ីនធឺណិតទាំងនេះ។ សូមពិគ្រោះជាមួយឯកសាររបស់ពួកគេសម្រាប់របៀបបញ្ចូលឧបករណ៍ទាំងនេះទៅក្នុងគម្រោងរបស់អ្នក។

ឧបករណ៍ចល័ត

និយាយជាទូទៅ Bootstrap គាំទ្រកំណែចុងក្រោយបំផុតនៃកម្មវិធីរុករកលំនាំដើមរបស់វេទិកាសំខាន់ៗនីមួយៗ។ ចំណាំថាកម្មវិធីរុករកប្រូកស៊ី (ដូចជា Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) មិនត្រូវបានគាំទ្រទេ។

Chrome Firefox សាហ្វារី កម្មវិធីរុករកតាមអ៊ីនធឺណិត Android & WebView ក្រុមហ៊ុន Microsoft Edge
ប្រព័ន្ធប្រតិបត្តិការ Android គាំទ្រ គាំទ្រ គ្មាន ប្រព័ន្ធប្រតិបត្តិការ Android v5.0+ គាំទ្រ គាំទ្រ
ប្រព័ន្ធប្រតិបត្តិការ iOS គាំទ្រ គាំទ្រ គាំទ្រ គ្មាន គាំទ្រ
ប្រព័ន្ធប្រតិបត្តិការ Windows 10 Mobile គ្មាន គ្មាន គ្មាន គ្មាន គាំទ្រ

កម្មវិធីរុករកលើតុ

ស្រដៀងគ្នានេះដែរ កំណែចុងក្រោយបំផុតនៃកម្មវិធីរុករកលើតុភាគច្រើនត្រូវបានគាំទ្រ។

Chrome Firefox Internet Explorer ក្រុមហ៊ុន Microsoft Edge ល្ខោនអូប៉េរ៉ា សាហ្វារី
ម៉ាក់ គាំទ្រ គាំទ្រ គ្មាន គ្មាន គាំទ្រ គាំទ្រ
វីនដូ គាំទ្រ គាំទ្រ គាំទ្រ IE10+ គាំទ្រ គាំទ្រ មិន​គាំទ្រ

សម្រាប់ Firefox បន្ថែមពីលើការចេញផ្សាយស្ថេរភាពធម្មតាចុងក្រោយបំផុត យើងក៏គាំទ្រ កំណែចុងក្រោយបង្អស់របស់ Firefox Extended Support Release (ESR) ផងដែរ។

ក្រៅផ្លូវការ Bootstrap គួរតែមើលទៅ និងមានឥរិយាបថគ្រប់គ្រាន់នៅក្នុង Chromium និង Chrome សម្រាប់ Linux, Firefox សម្រាប់ Linux និង Internet Explorer 9 ទោះបីជាពួកវាមិនត្រូវបានគាំទ្រជាផ្លូវការក៏ដោយ។

សម្រាប់បញ្ជីនៃកំហុសកម្មវិធីរុករកមួយចំនួនដែល Bootstrap ត្រូវដោះស្រាយ សូមមើល ជញ្ជាំងនៃកម្មវិធីរុករករបស់យើង កំហុស ។

Internet Explorer

Internet Explorer 10+ ត្រូវបានគាំទ្រ។ IE9 និងចុះក្រោមគឺមិនមែនទេ។ សូមជ្រាបថា លក្ខណៈសម្បត្តិ CSS3 និងធាតុ HTML5 មួយចំនួនមិនត្រូវបានគាំទ្រពេញលេញនៅក្នុង IE10 ឬទាមទារលក្ខណៈសម្បត្តិបុព្វបទសម្រាប់មុខងារពេញលេញ។ សូមចូលទៅកាន់ Can I use… សម្រាប់ព័ត៌មានលម្អិតអំពីមុខងារ browser support CSS3 និង HTML5។

ប្រសិនបើអ្នកត្រូវការការគាំទ្រ IE8-9 សូមប្រើ Bootstrap 3។ វាជាកំណែដែលមានស្ថេរភាពបំផុតនៃកូដរបស់យើង ហើយនៅតែត្រូវបានគាំទ្រដោយក្រុមរបស់យើងសម្រាប់ការកែកំហុស និងការផ្លាស់ប្តូរឯកសារសំខាន់ៗ។ ទោះយ៉ាងណាក៏ដោយ មិនមានមុខងារថ្មីនឹងត្រូវបានបន្ថែមទៅវាទេ។

គំរូ និងទម្លាក់ចុះនៅលើទូរសព្ទ

ហូរហៀរនិងរមូរ

ការ​គាំទ្រ​សម្រាប់ overflow: hidden;​នៅ​លើ <body>​ធាតុ​គឺ​មាន​កម្រិត​ណាស់​នៅ​ក្នុង iOS និង Android ។ ដល់ទីបញ្ចប់នេះ នៅពេលអ្នករមូរឆ្លងកាត់ផ្នែកខាងលើ ឬខាងក្រោមនៃម៉ូឌុលនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់ឧបករណ៍ទាំងនោះ <body>ខ្លឹមសារនឹងចាប់ផ្តើមរមូរ។ សូមមើល កំហុសរបស់ Chrome #175502 (ជួសជុលនៅក្នុង Chrome v40) និង កំហុស WebKit #153852 ។

វាលអត្ថបទ iOS និងការរមូរ

ចាប់តាំងពីប្រព័ន្ធប្រតិបត្តិការ iOS 9.2 ខណៈពេលដែលម៉ូឌុលមួយត្រូវបានបើក ប្រសិនបើការប៉ះដំបូងនៃកាយវិការរមូរស្ថិតនៅក្នុងព្រំដែននៃអត្ថបទ <input>ឬ a <textarea>នោះ <body>ខ្លឹមសារនៅក្រោមម៉ូឌុលនឹងត្រូវបានរមូរជំនួសឱ្យម៉ូឌុលខ្លួនឯង។ មើល កំហុស WebKit #153856 ។

ធាតុ នេះ .dropdown-backdropមិនត្រូវបានប្រើនៅលើប្រព័ន្ធប្រតិបត្តិការ iOS នៅក្នុង nav ដោយសារតែភាពស្មុគស្មាញនៃការបង្កើតលិបិក្រម z ។ ដូច្នេះ ដើម្បី​បិទ dropdowns ក្នុង navbars អ្នក​ត្រូវ​តែ​ចុច​លើ dropdown element (ឬ ​ធាតុ​ផ្សេង​ទៀត​ដែល​នឹង​បញ្ឆេះ​ព្រឹត្តិការណ៍​ចុច​នៅ​ក្នុង iOS )។

ការពង្រីកកម្មវិធីរុករក

ការពង្រីកទំព័រដោយជៀសមិនរួចបង្ហាញពីការបង្ហាញវត្ថុបុរាណនៅក្នុងសមាសធាតុមួយចំនួន ទាំងនៅក្នុង Bootstrap និងផ្នែកផ្សេងទៀតនៃគេហទំព័រ។ អាស្រ័យលើបញ្ហា យើងអាចជួសជុលវាបាន (ស្វែងរកជាមុន ហើយបន្ទាប់មកបើកបញ្ហាប្រសិនបើចាំបាច់)។ ទោះជាយ៉ាងណាក៏ដោយ យើងមានទំនោរមិនអើពើនឹងបញ្ហាទាំងនេះ ដោយសារពួកគេច្រើនតែមិនមានដំណោះស្រាយផ្ទាល់ក្រៅពីការដោះស្រាយការលួចចូល។

ស្អិត :hover/ :focusនៅលើ iOS

ខណៈពេលដែល :hoverមិនអាចធ្វើទៅបាននៅលើឧបករណ៍ប៉ះភាគច្រើន iOS ធ្វើត្រាប់តាមឥរិយាបថនេះ ដែលបណ្តាលឱ្យមានរចនាប័ទ្ម "ស្អិត" បន្តបន្ទាប់បន្ទាប់ពីប៉ះធាតុមួយ។ រចនាប័ទ្ម​ដាក់​សំកាំង​ទាំង​នេះ​ត្រូវ​បាន​លុប​ចេញ​តែ​នៅ​ពេល​ដែល​អ្នក​ប្រើ​ប៉ះ​ធាតុ​ផ្សេង​ទៀត។ ឥរិយាបថនេះត្រូវបានចាត់ទុកថាមិនគួរឱ្យចង់បាន ហើយហាក់ដូចជាមិនមែនជាបញ្ហានៅលើឧបករណ៍ Android ឬ Windows ទេ។

ពេញមួយការចេញផ្សាយអាល់ហ្វា និងបេតា v4 របស់យើង យើងបានបញ្ចូលកូដមិនពេញលេញ និងបានបញ្ចេញមតិសម្រាប់ការជ្រើសរើសចូលទៅក្នុងសំណួរមេឌៀ ដែលនឹងបិទរចនាប័ទ្មដាក់កណ្ដុរនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតឧបករណ៍ដែលធ្វើត្រាប់តាមការដាក់កណ្ដុរ។ ការងារនេះមិនដែលត្រូវបានបញ្ចប់ទាំងស្រុង ឬបើកដំណើរការនោះទេ ប៉ុន្តែដើម្បីជៀសវាងការបែកបាក់ពេញលេញ យើងបានជ្រើសរើសបដិសេធ ការបិទបាំងនេះ និងរក្សាទុក mixins ជាផ្លូវកាត់សម្រាប់ថ្នាក់ pseudo-class។

ការបោះពុម្ព

សូម្បីតែនៅក្នុងកម្មវិធីរុករកទំនើបមួយចំនួនក៏ដោយ ការបោះពុម្ពអាចមានលក្ខណៈប្លែក។

ក្នុងនាមជា Safari v8.0 ការប្រើប្រាស់ថ្នាក់ទទឹងថេរ .containerអាចបណ្តាលឱ្យ Safari ប្រើទំហំពុម្ពអក្សរតូចខុសពីធម្មតានៅពេលបោះពុម្ព។ សូមមើល បញ្ហា #14868 និង កំហុស WebKit #138192 សម្រាប់ព័ត៌មានលម្អិត។ ដំណោះស្រាយសក្តានុពលមួយគឺ CSS ខាងក្រោម៖

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

កម្មវិធីរុករកស្តុក Android

ក្រៅប្រអប់ ប្រព័ន្ធប្រតិបត្តិការ Android 4.1 (និងសូម្បីតែការចេញផ្សាយថ្មីជាងនេះជាក់ស្តែង) ដឹកជញ្ជូនជាមួយកម្មវិធី Browser ជាកម្មវិធីរុករកតាមអ៊ីនធឺណិតលំនាំដើមនៃជម្រើស (ផ្ទុយពី Chrome) ។ ជាអកុសល កម្មវិធី Browser មានកំហុសជាច្រើន និងភាពមិនស៊ីសង្វាក់គ្នាជាមួយ 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 Bin នេះ។

អ្នកផ្តល់សុពលភាព

ដើម្បីផ្តល់នូវបទពិសោធន៍ដ៏ល្អបំផុតដល់កម្មវិធីរុករកតាមអ៊ីនធឺណិតចាស់ៗ និងដែលមានកំហុសនោះ Bootstrap ប្រើ ការលួចចូលកម្មវិធីរុករកតាមអ៊ីនធឺណិត CSS នៅកន្លែងជាច្រើនដើម្បីកំណត់ CSS ពិសេសទៅកាន់កំណែកម្មវិធីរុករកតាមអ៊ីនធឺណិតមួយចំនួន ដើម្បីធ្វើការជុំវិញបញ្ហានៅក្នុងកម្មវិធីរុករកខ្លួនឯង។ ការលួចចូលទាំងនេះពិតជាធ្វើឱ្យអ្នកផ្ទៀងផ្ទាត់ CSS ត្អូញត្អែរថាពួកគេមិនត្រឹមត្រូវ។ នៅកន្លែងពីរបី យើងក៏ប្រើមុខងារ CSS ដែលមិនទាន់មានស្តង់ដារពេញលេញនៅឡើយ ប៉ុន្តែទាំងនេះត្រូវបានប្រើប្រាស់សុទ្ធសាធសម្រាប់ការធ្វើឱ្យប្រសើរឡើងជាលំដាប់។

ការព្រមានអំពីសុពលភាពទាំងនេះមិនមានបញ្ហាក្នុងការអនុវត្តទេ ដោយសារផ្នែកដែលមិន hacky នៃ CSS របស់យើងមានសុពលភាពពេញលេញ ហើយផ្នែកដែលលួចចូលមិនជ្រៀតជ្រែកជាមួយនឹងដំណើរការត្រឹមត្រូវនៃផ្នែកដែលមិន hacky ដូច្នេះហេតុអ្វីបានជាយើងមិនអើពើនឹងការព្រមានពិសេសទាំងនេះដោយចេតនា។

ឯកសារ HTML របស់យើងក៏មានការព្រមានអំពីសុពលភាព HTML ដែលមិនសំខាន់ និងមិនសមហេតុផល ដោយសារតែការរួមបញ្ចូលរបស់យើងនូវដំណោះស្រាយសម្រាប់ កំហុស Firefox ជាក់លាក់មួយ ។