เบราว์เซอร์และอุปกรณ์
เรียนรู้เกี่ยวกับเบราว์เซอร์และอุปกรณ์ตั้งแต่สมัยใหม่ไปจนถึงรุ่นเก่าที่ Bootstrap รองรับ ซึ่งรวมถึงความไม่ชอบมาพากลและจุดบกพร่องที่ทราบสำหรับแต่ละรายการ
เบราว์เซอร์ที่รองรับ
Bootstrap รองรับเบราว์เซอร์และแพลตฟอร์มหลัก ๆรุ่นล่าสุดที่เสถียร บน Windows เรารองรับ Internet Explorer 10-11 / Microsoft Edge
ไม่รองรับเบราว์เซอร์ทางเลือกที่ใช้ WebKit, Blink หรือ Gecko เวอร์ชันล่าสุด ไม่ว่าจะโดยตรงหรือผ่าน API การดูเว็บของแพลตฟอร์ม อย่างไรก็ตาม Bootstrap ควร (ในกรณีส่วนใหญ่) แสดงและทำงานอย่างถูกต้องในเบราว์เซอร์เหล่านี้เช่นกัน ข้อมูลสนับสนุนที่เฉพาะเจาะจงเพิ่มเติมมีให้ด้านล่าง
คุณสามารถค้นหาช่วงเบราว์เซอร์และเวอร์ชันที่รองรับของเรา.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
เราใช้Autoprefixerเพื่อจัดการกับการสนับสนุนเบราว์เซอร์ที่ต้องการผ่านคำนำหน้า CSS ซึ่งใช้Browserslistเพื่อจัดการเวอร์ชันเบราว์เซอร์เหล่านี้ ศึกษาเอกสารประกอบเกี่ยวกับวิธีการรวมเครื่องมือเหล่านี้เข้ากับโครงการของคุณ
อุปกรณ์มือถือ
โดยทั่วไป Bootstrap รองรับเวอร์ชันล่าสุดของเบราว์เซอร์เริ่มต้นของแต่ละแพลตฟอร์มหลัก โปรดทราบว่าไม่รองรับพร็อกซีเบราว์เซอร์ (เช่น Opera Mini, โหมด Turbo ของ Opera Mobile, UC Browser Mini, Amazon Silk)
| โครเมียม | Firefox | ซาฟารี | เบราว์เซอร์ Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ไม่มี | รองรับ Android v5.0+ | ได้รับการสนับสนุน |
| iOS | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ไม่มี | ได้รับการสนับสนุน |
| Windows 10 Mobile | ไม่มี | ไม่มี | ไม่มี | ไม่มี | ได้รับการสนับสนุน |
เบราว์เซอร์เดสก์ท็อป
ในทำนองเดียวกัน เวอร์ชันล่าสุดของเบราว์เซอร์เดสก์ท็อปส่วนใหญ่ได้รับการสนับสนุน
| โครเมียม | Firefox | Internet Explorer | Microsoft Edge | โอเปร่า | ซาฟารี | |
|---|---|---|---|---|---|---|
| Mac | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ไม่มี | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ได้รับการสนับสนุน |
| Windows | ได้รับการสนับสนุน | ได้รับการสนับสนุน | รองรับ IE10+ | ได้รับการสนับสนุน | ได้รับการสนับสนุน | ไม่รองรับ |
สำหรับ Firefox นอกเหนือจากรุ่นปกติล่าสุดที่เสถียรแล้ว เรายังสนับสนุนFirefox เวอร์ชันExtended Support Release (ESR) ล่าสุดอีกด้วย
อย่างไม่เป็นทางการ Bootstrap ควรมีลักษณะและทำงานได้ดีพอใน Chromium และ Chrome สำหรับ Linux, Firefox สำหรับ Linux และ Internet Explorer 9 แม้ว่าจะไม่ได้รับการสนับสนุนอย่างเป็นทางการก็ตาม
สำหรับรายการบั๊กของเบราว์เซอร์ที่ Bootstrap ต้องต่อสู้ โปรดดูที่บั๊ก Wall of browser ของเรา
Internet Explorer
รองรับ Internet Explorer 10+; IE9 และลงไม่ได้ โปรดทราบว่าคุณสมบัติ CSS3 และองค์ประกอบ HTML5 บางอย่างไม่ได้รับการสนับสนุนอย่างสมบูรณ์ใน IE10 หรือต้องใช้คุณสมบัตินำหน้าเพื่อการทำงานที่สมบูรณ์ เยี่ยมชมฉันสามารถใช้...เพื่อดูรายละเอียดเกี่ยวกับการสนับสนุนเบราว์เซอร์ของคุณสมบัติ CSS3 และ HTML5 หากคุณต้องการการสนับสนุน IE8-9 ให้ใช้ Bootstrap 3
Modals และ dropdowns บนมือถือ
ล้นและเลื่อน
overflow: hidden;การสนับสนุน<body>องค์ประกอบค่อนข้างจำกัดใน iOS และ Android ด้วยเหตุนี้ เมื่อคุณเลื่อนผ่านด้านบนหรือด้านล่างของโมดอลในเบราว์เซอร์ของอุปกรณ์เหล่านั้น<body>เนื้อหาจะเริ่มเลื่อน ดูข้อบกพร่องของ Chrome #175502 (แก้ไขใน Chrome v40) และ ข้อบกพร่อง ของWebKit #153852
ช่องข้อความ iOS และการเลื่อน
สำหรับ iOS 9.2 ในขณะที่โมดอลเปิดอยู่ หากการสัมผัสครั้งแรกของท่าทางการเลื่อนอยู่ภายในขอบเขตของข้อความ<input>หรือ a เนื้อหา <textarea>ที่<body>อยู่ใต้โมดัลนั้นจะถูกเลื่อนแทนที่จะเป็นโมดอลเอง ดู ข้อบกพร่อง ของWebKit #153856
Navbar Dropdowns
องค์ประกอบ.dropdown-backdropนี้ไม่ได้ใช้บน iOS ในการนำทางเนื่องจากความซับซ้อนของการทำดัชนี z ดังนั้น ในการปิดดรอปดาวน์ในแถบนำทาง คุณต้องคลิกองค์ประกอบแบบเลื่อนลงโดยตรง (หรือองค์ประกอบอื่นใดที่จะทำให้เกิดเหตุการณ์การคลิกใน iOS )
การซูมเบราว์เซอร์
การซูมหน้าอย่างหลีกเลี่ยงไม่ได้นำเสนอสิ่งประดิษฐ์ในองค์ประกอบบางอย่าง ทั้งใน Bootstrap และส่วนที่เหลือของเว็บ เราอาจแก้ไขได้ (ค้นหาก่อนแล้วจึงเปิดปัญหาหากจำเป็น) ทั้งนี้ขึ้นอยู่กับปัญหา อย่างไรก็ตาม เรามักจะเพิกเฉยต่อสิ่งเหล่านี้ เนื่องจากมักไม่มีวิธีแก้ปัญหาโดยตรงนอกจากวิธีแก้ปัญหาชั่วคราวที่เป็นการแฮ็ก
เหนียว:hover/ :focusบน iOS
แม้ว่า:hoverอุปกรณ์ระบบสัมผัสส่วนใหญ่จะไม่สามารถทำได้ แต่ iOS จะเลียนแบบพฤติกรรมนี้ ส่งผลให้รูปแบบโฮเวอร์ "เหนียว" ยังคงอยู่หลังจากแตะองค์ประกอบหนึ่ง สไตล์โฮเวอร์เหล่านี้จะถูกลบออกเมื่อผู้ใช้แตะองค์ประกอบอื่นเท่านั้น ลักษณะการทำงานนี้ถือว่าไม่พึงปรารถนาเป็นส่วนใหญ่ และดูเหมือนจะไม่มีปัญหากับอุปกรณ์ Android หรือ Windows
ตลอดเวอร์ชันอัลฟ่าและเบต้าเวอร์ชัน 4 ของเรา เราได้รวมโค้ดที่ไม่สมบูรณ์และใส่ความคิดเห็นสำหรับการเลือกใช้ shim แบบสอบถามสื่อที่จะปิดใช้งานรูปแบบโฮเวอร์ในเบราว์เซอร์ของอุปกรณ์สัมผัสที่จำลองการโฮเวอร์ งานนี้ไม่เสร็จสมบูรณ์หรือเปิดใช้งานอย่างสมบูรณ์ แต่เพื่อหลีกเลี่ยงความเสียหายทั้งหมด เราได้เลือกที่จะเลิกใช้shim นี้และเก็บมิกซ์อินเป็นทางลัดสำหรับคลาสหลอก
การพิมพ์
แม้แต่ในเบราว์เซอร์สมัยใหม่บางตัว การพิมพ์ก็อาจดูแปลกไป
ตั้งแต่ Safari v8.0 การใช้คลาสความกว้างคงที่.containerอาจทำให้ Safari ใช้ขนาดฟอนต์ที่เล็กผิดปกติเมื่อพิมพ์ ดูปัญหา #14868และ จุด บกพร่องของ WebKit #138192สำหรับรายละเอียดเพิ่มเติม วิธีแก้ปัญหาที่เป็นไปได้อย่างหนึ่งคือ CSS ต่อไปนี้:
@media print {
.container {
width: auto;
}
}
เบราว์เซอร์หุ้น Android
นอกกรอบ 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 Binนี้
เครื่องมือตรวจสอบ
เพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดให้กับเบราว์เซอร์รุ่นเก่าและบั๊กกี้ Bootstrap ใช้การแฮ็กของเบราว์เซอร์ CSSในหลาย ๆ ที่เพื่อกำหนดเป้าหมาย CSS พิเศษไปยังเบราว์เซอร์บางรุ่นเพื่อแก้ไขข้อบกพร่องในเบราว์เซอร์เอง การแฮ็กเหล่านี้ทำให้ผู้ตรวจสอบ CSS บ่นว่าไม่ถูกต้อง ในสองสามแห่ง เรายังใช้คุณสมบัติ CSS ที่ล้ำหน้าซึ่งยังไม่ได้มาตรฐานอย่างสมบูรณ์ แต่สิ่งเหล่านี้ใช้เพื่อการปรับปรุงแบบก้าวหน้าเท่านั้น
คำเตือนเกี่ยวกับการตรวจสอบความถูกต้องเหล่านี้ไม่สำคัญในทางปฏิบัติ เนื่องจากส่วนที่ไม่แฮ็กของ CSS ของเราตรวจสอบได้อย่างสมบูรณ์ และส่วนที่ถูกแฮ็กไม่รบกวนการทำงานที่เหมาะสมของส่วนที่ไม่ถูกแฮ็ก เหตุใดเราจึงเพิกเฉยต่อคำเตือนเหล่านี้โดยเจตนา
เอกสาร HTML ของเราก็มีคำเตือนเกี่ยวกับการตรวจสอบ HTML ที่ไม่สำคัญและไม่เป็นผลสืบเนื่องเนื่องจากการรวมวิธีแก้ไขปัญหาชั่วคราวสำหรับ จุดบกพร่อง ของFirefox