ຕົວທ່ອງເວັບແລະອຸປະກອນ
ຮຽນຮູ້ກ່ຽວກັບຕົວທ່ອງເວັບແລະອຸປະກອນ, ຈາກທີ່ທັນສະໄຫມຈົນເຖິງເກົ່າ, ທີ່ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍ Bootstrap, ລວມທັງ quirks ແລະແມງໄມ້ທີ່ຮູ້ຈັກສໍາລັບແຕ່ລະຄົນ.
ຕົວທ່ອງເວັບທີ່ຮອງຮັບ
Bootstrap ສະຫນັບສະຫນູນການປ່ອຍ ຫລ້າສຸດ, ຫມັ້ນຄົງ ຂອງຕົວທ່ອງເວັບແລະເວທີທີ່ສໍາຄັນທັງຫມົດ.
ຕົວທ່ອງເວັບທາງເລືອກທີ່ໃຊ້ WebKit, Blink, ຫຼື Gecko ເວີຊັນຫຼ້າສຸດ, ບໍ່ວ່າຈະໂດຍກົງຫຼືຜ່ານ API ເບິ່ງເວັບຂອງເວທີ, ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງຊັດເຈນ. ຢ່າງໃດກໍຕາມ, Bootstrap ຄວນ (ໃນກໍລະນີຫຼາຍທີ່ສຸດ) ສະແດງແລະເຮັດວຽກຢ່າງຖືກຕ້ອງໃນຕົວທ່ອງເວັບເຫຼົ່ານີ້ເຊັ່ນດຽວກັນ. ຂໍ້ມູນການສະຫນັບສະຫນູນສະເພາະແມ່ນສະຫນອງໃຫ້ຂ້າງລຸ່ມນີ້.
ທ່ານສາມາດຊອກຫາໄລຍະສະຫນັບສະຫນູນຂອງພວກເຮົາຂອງຕົວທ່ອງເວັບແລະສະບັບຂອງພວກເຂົາ ໃນ.browserslistrc file :
# https://github.com/browserslist/browserslist#readme
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
ພວກເຮົາໃຊ້ Autoprefixer ເພື່ອຈັດການການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບທີ່ຕັ້ງໃຈຜ່ານຄໍານໍາຫນ້າ CSS, ເຊິ່ງໃຊ້ Browserslist ເພື່ອຈັດການສະບັບຂອງຕົວທ່ອງເວັບເຫຼົ່ານີ້. ປຶກສາຫາລືເອກະສານຂອງເຂົາເຈົ້າສໍາລັບວິທີການປະສົມປະສານເຄື່ອງມືເຫຼົ່ານີ້ເຂົ້າໃນໂຄງການຂອງທ່ານ.
ອຸປະກອນມືຖື
ໂດຍທົ່ວໄປແລ້ວ, Bootstrap ສະຫນັບສະຫນູນເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນຂອງແຕ່ລະແພລະຕະຟອມທີ່ສໍາຄັນ. ໃຫ້ສັງເກດວ່າຕົວທ່ອງເວັບຂອງຕົວແທນ (ເຊັ່ນ Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ແມ່ນບໍ່ຮອງຮັບ.
| Chrome | Firefox | Safari | Android Browser & WebView | |
|---|---|---|---|---|
| Android | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | — | v6.0+ |
| iOS | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | — |
ຕົວທ່ອງເວັບຂອງ desktop
ເຊັ່ນດຽວກັນ, ເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບ desktop ສ່ວນໃຫຍ່ໄດ້ຮັບການສະຫນັບສະຫນູນ.
| Chrome | Firefox | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|
| Mac | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ |
| Windows | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | ສະຫນັບສະຫນູນ | — |
ສໍາລັບ Firefox, ນອກເຫນືອຈາກການປ່ອຍຄວາມຫມັ້ນຄົງປົກກະຕິຫລ້າສຸດ, ພວກເຮົາຍັງສະຫນັບສະຫນູນການ ຂະຫຍາຍການສະຫນັບສະຫນູນ (ESR) ຮຸ່ນຫຼ້າສຸດຂອງ Firefox.
ໂດຍບໍ່ເປັນທາງການ, Bootstrap ຄວນເບິ່ງແລະປະຕິບັດຕົວພຽງພໍໃນ Chromium ແລະ Chrome ສໍາລັບ Linux, ແລະ Firefox ສໍາລັບ Linux, ເຖິງແມ່ນວ່າພວກເຂົາບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເປັນທາງການ.
Internet Explorer
ບໍ່ຮອງຮັບ Internet Explorer. ຖ້າທ່ານຕ້ອງການສະຫນັບສະຫນູນ Internet Explorer, ກະລຸນາໃຊ້ Bootstrap v4.
Modals ແລະ dropdowns ໃນມືຖື
ລົ້ນ ແລະ ເລື່ອນ
ການສະຫນັບສະຫນູນສໍາລັບ ອົງ overflow: hidden;ປະ <body>ກອບແມ່ນຂ້ອນຂ້າງຈໍາກັດໃນ iOS ແລະ Android. ເພື່ອເຮັດສິ່ງນີ້, ເມື່ອທ່ານເລື່ອນຜ່ານທາງເທິງຫຼືລຸ່ມຂອງ modal ໃນຕົວທ່ອງເວັບຂອງອຸປະກອນເຫຼົ່ານັ້ນ, <body>ເນື້ອຫາຈະເລີ່ມເລື່ອນລົງ. ເບິ່ງ ຂໍ້ບົກພ່ອງຂອງ Chrome #175502 (ແກ້ໄຂໃນ Chrome v40) ແລະ ຂໍ້ບົກພ່ອງ WebKit #153852 .
ຊ່ອງຂໍ້ມູນ iOS ແລະເລື່ອນ
ໃນຖານະເປັນ iOS 9.2, ໃນຂະນະທີ່ modal ເປີດ, ຖ້າການສໍາພັດເບື້ອງຕົ້ນຂອງ gesture ເລື່ອນແມ່ນຢູ່ໃນຂອບເຂດຂອງຂໍ້ຄວາມ <input>ຫຼື a <textarea>, <body>ເນື້ອໃນພາຍໃຕ້ modal ຈະຖືກເລື່ອນແທນທີ່ຈະເປັນ modal ຕົວຂອງມັນເອງ. ເບິ່ງ WebKit bug #153856 .
ເລື່ອນລົງ Navbar
ອົງ ປະ .dropdown-backdropກອບດັ່ງກ່າວບໍ່ໄດ້ໃຊ້ໃນ iOS ໃນ nav ເນື່ອງຈາກຄວາມສັບສົນຂອງ z-indexing. ດັ່ງນັ້ນ, ເພື່ອປິດ dropdowns ໃນ navbars, ທ່ານຕ້ອງໄດ້ໂດຍກົງຄລິກອົງປະກອບ dropdown (ຫຼື ອົງປະກອບອື່ນໆທີ່ຈະ fire event ຄລິກໃນ iOS ).
ການຊູມຂອງຕົວທ່ອງເວັບ
ການຊູມຫນ້າຢ່າງຫຼີກລ່ຽງບໍ່ໄດ້ສະເຫນີການສະແດງຜົນປອມໃນບາງອົງປະກອບ, ທັງໃນ Bootstrap ແລະສ່ວນທີ່ເຫຼືອຂອງເວັບ. ອີງຕາມບັນຫາ, ພວກເຮົາອາດຈະສາມາດແກ້ໄຂໄດ້ (ຄົ້ນຫາກ່ອນແລະຫຼັງຈາກນັ້ນເປີດບັນຫາຖ້າຕ້ອງການ). ຢ່າງໃດກໍຕາມ, ພວກເຮົາມີແນວໂນ້ມທີ່ຈະບໍ່ສົນໃຈສິ່ງເຫຼົ່ານີ້ຍ້ອນວ່າພວກເຂົາມັກຈະບໍ່ມີການແກ້ໄຂໂດຍກົງນອກເຫນືອຈາກການແກ້ໄຂບັນຫາ hacky.
ຜູ້ກວດສອບ
ເພື່ອໃຫ້ປະສົບການທີ່ດີທີ່ສຸດທີ່ເປັນໄປໄດ້ກັບຕົວທ່ອງເວັບເກົ່າແລະ buggy, Bootstrap ໃຊ້ CSS browser hacks ໃນຫຼາຍໆບ່ອນເພື່ອເປົ້າຫມາຍ CSS ພິເສດໃຫ້ກັບບາງຮຸ່ນຂອງຕົວທ່ອງເວັບເພື່ອເຮັດວຽກກັບແມງໄມ້ໃນຕົວທ່ອງເວັບຂອງຕົນເອງ. ການແຮັກເຫຼົ່ານີ້ເຂົ້າໃຈໄດ້ເຮັດໃຫ້ຜູ້ກວດສອບ CSS ຈົ່ມວ່າບໍ່ຖືກຕ້ອງ. ຢູ່ໃນສະຖານທີ່ສອງຢ່າງ, ພວກເຮົາຍັງໃຊ້ຄຸນສົມບັດ CSS ທີ່ມີເລືອດອອກທີ່ຍັງບໍ່ທັນໄດ້ມາດຕະຖານຢ່າງເຕັມສ່ວນ, ແຕ່ເຫຼົ່ານີ້ຖືກນໍາໃຊ້ຢ່າງດຽວສໍາລັບການເພີ່ມປະສິດທິພາບກ້າວຫນ້າ.
ຄໍາເຕືອນການຢືນຢັນເຫຼົ່ານີ້ບໍ່ສໍາຄັນໃນການປະຕິບັດເພາະວ່າສ່ວນທີ່ບໍ່ແມ່ນ hacky ຂອງ CSS ຂອງພວກເຮົາມີຄວາມຖືກຕ້ອງຢ່າງເຕັມສ່ວນແລະສ່ວນ hacky ບໍ່ໄດ້ແຊກແຊງການເຮັດວຽກທີ່ເຫມາະສົມຂອງສ່ວນທີ່ບໍ່ແມ່ນ hacky, ດັ່ງນັ້ນເປັນຫຍັງພວກເຮົາເຈດຕະນາບໍ່ສົນໃຈຄໍາເຕືອນໂດຍສະເພາະເຫຼົ່ານີ້.
ເອກະສານ HTML ຂອງພວກເຮົາເຊັ່ນດຽວກັນມີບາງຄໍາເຕືອນການກວດສອບ HTML ທີ່ບໍ່ສໍາຄັນແລະບໍ່ມີຜົນສະທ້ອນອັນເນື່ອງມາຈາກການລວມເອົາການແກ້ໄຂຂອງພວກເຮົາສໍາລັບ ບາງຂໍ້ຜິດພາດ Firefox .