เบราว์เซอร์และอุปกรณ์

เรียนรู้เกี่ยวกับเบราว์เซอร์และอุปกรณ์ตั้งแต่สมัยใหม่ไปจนถึงรุ่นเก่าที่ Bootstrap รองรับ ซึ่งรวมถึงความไม่ชอบมาพากลและจุดบกพร่องที่ทราบสำหรับแต่ละรายการ

ในหน้านี้

เบราว์เซอร์ที่รองรับ

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, โหมด Turbo ของ Opera Mobile, UC Browser Mini, Amazon Silk)

	โครเมียม	Firefox	ซาฟารี	เบราว์เซอร์ Android & WebView
Android	ได้รับการสนับสนุน	ได้รับการสนับสนุน	—	v6.0+
iOS	ได้รับการสนับสนุน	ได้รับการสนับสนุน	ได้รับการสนับสนุน	—

เบราว์เซอร์เดสก์ท็อป

ในทำนองเดียวกัน เวอร์ชันล่าสุดของเบราว์เซอร์เดสก์ท็อปส่วนใหญ่ได้รับการสนับสนุน

	โครเมียม	Firefox	Microsoft Edge	โอเปร่า	ซาฟารี
Mac	ได้รับการสนับสนุน	ได้รับการสนับสนุน	ได้รับการสนับสนุน	ได้รับการสนับสนุน	ได้รับการสนับสนุน
Windows	ได้รับการสนับสนุน	ได้รับการสนับสนุน	ได้รับการสนับสนุน	ได้รับการสนับสนุน	—

สำหรับ Firefox นอกเหนือจากรุ่นปกติล่าสุดที่เสถียรแล้ว เรายังสนับสนุนFirefox เวอร์ชันExtended Support Release (ESR) ล่าสุดอีกด้วย

อย่างไม่เป็นทางการ Bootstrap ควรมีลักษณะและทำงานได้ดีพอใน Chromium และ Chrome สำหรับ Linux และ Firefox สำหรับ Linux แม้ว่าจะไม่รองรับอย่างเป็นทางการก็ตาม

Internet Explorer

ไม่รองรับ Internet Explorer หากคุณต้องการการสนับสนุน Internet Explorer โปรดใช้ Bootstrap v4

Modals และ dropdowns บนมือถือ

ล้นและเลื่อน

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 ในการนำทางเนื่องจากความซับซ้อนของการทำดัชนี z ดังนั้น ในการปิดดรอปดาวน์ในแถบนำทาง คุณต้องคลิกองค์ประกอบแบบเลื่อนลงโดยตรง (หรือองค์ประกอบอื่นใดที่จะทำให้เกิดเหตุการณ์การคลิกใน iOS )

การซูมเบราว์เซอร์

การซูมหน้าอย่างหลีกเลี่ยงไม่ได้นำเสนอสิ่งประดิษฐ์ในองค์ประกอบบางอย่าง ทั้งใน Bootstrap และส่วนที่เหลือของเว็บ เราอาจแก้ไขได้ (ค้นหาก่อนแล้วจึงเปิดปัญหาหากจำเป็น) ทั้งนี้ขึ้นอยู่กับปัญหา อย่างไรก็ตาม เรามักจะเพิกเฉยต่อสิ่งเหล่านี้ เนื่องจากมักไม่มีวิธีแก้ปัญหาโดยตรงนอกจากวิธีแก้ปัญหาชั่วคราวที่เป็นการแฮ็ก

เครื่องมือตรวจสอบ

เพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดให้กับเบราว์เซอร์รุ่นเก่าและบั๊กกี้ Bootstrap ใช้การแฮ็กของเบราว์เซอร์ CSSในหลาย ๆ ที่เพื่อกำหนดเป้าหมาย CSS พิเศษไปยังเบราว์เซอร์บางรุ่นเพื่อแก้ไขข้อบกพร่องในเบราว์เซอร์เอง การแฮ็กเหล่านี้ทำให้ผู้ตรวจสอบ CSS บ่นว่าไม่ถูกต้อง ในสองสามแห่ง เรายังใช้คุณสมบัติ CSS ที่ล้ำหน้าซึ่งยังไม่ได้มาตรฐานอย่างสมบูรณ์ แต่สิ่งเหล่านี้ใช้เพื่อการปรับปรุงแบบก้าวหน้าเท่านั้น

คำเตือนเกี่ยวกับการตรวจสอบความถูกต้องเหล่านี้ไม่สำคัญในทางปฏิบัติ เนื่องจากส่วนที่ไม่แฮ็กของ CSS ของเราตรวจสอบได้อย่างสมบูรณ์ และส่วนที่ถูกแฮ็กไม่รบกวนการทำงานที่เหมาะสมของส่วนที่ไม่ถูกแฮ็ก เหตุใดเราจึงเพิกเฉยต่อคำเตือนเหล่านี้โดยเจตนา

เอกสาร HTML ของเราก็มีคำเตือนเกี่ยวกับการตรวจสอบ HTML ที่ไม่สำคัญและไม่เป็นผลสืบเนื่องเนื่องจากการรวมวิธีแก้ไขปัญหาชั่วคราวสำหรับ จุดบกพร่อง ของFirefox