Source

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

เรียนรู้เกี่ยวกับเบราว์เซอร์และอุปกรณ์ตั้งแต่สมัยใหม่ไปจนถึงรุ่นเก่าที่ 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

องค์ประกอบ.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