Trình duyệt và thiết bị
Tìm hiểu về các trình duyệt và thiết bị, từ hiện đại đến cũ, được Bootstrap hỗ trợ, bao gồm các lỗi và lỗi đã biết cho từng loại.
Các trình duyệt được hỗ trợ
Bootstrap hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Trên Windows, chúng tôi hỗ trợ Internet Explorer 10-11 / Microsoft Edge .
Các trình duyệt thay thế sử dụng phiên bản mới nhất của WebKit, Blink hoặc Gecko, cho dù trực tiếp hoặc thông qua API chế độ xem web của nền tảng, đều không được hỗ trợ rõ ràng. Tuy nhiên, Bootstrap cũng nên hiển thị và hoạt động chính xác trong các trình duyệt này. Thông tin hỗ trợ cụ thể hơn được cung cấp bên dưới.
Bạn có thể tìm thấy phạm vi trình duyệt được hỗ trợ của chúng tôi và các phiên bản của chúng trong.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
Chúng tôi sử dụng Trình sửa lỗi tự động để xử lý hỗ trợ trình duyệt dự định thông qua tiền tố CSS, sử dụng Danh sách trình duyệt để quản lý các phiên bản trình duyệt này. Tham khảo tài liệu của họ để biết cách tích hợp các công cụ này vào các dự án của bạn.
Thiêt bị di động
Nói chung, Bootstrap hỗ trợ các phiên bản mới nhất của các trình duyệt mặc định của mỗi nền tảng chính. Lưu ý rằng các trình duyệt proxy (chẳng hạn như Opera Mini, chế độ Turbo của Opera Mobile, UC Browser Mini, Amazon Silk) không được hỗ trợ.
| Trình duyệt Chrome | Firefox | Cuộc đi săn | Trình duyệt Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Được hỗ trợ | Được hỗ trợ | N / A | Hỗ trợ Android v5.0 + | Được hỗ trợ |
| iOS | Được hỗ trợ | Được hỗ trợ | Được hỗ trợ | N / A | Được hỗ trợ |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Được hỗ trợ |
Trình duyệt máy tính để bàn
Tương tự, các phiên bản mới nhất của hầu hết các trình duyệt trên máy tính để bàn đều được hỗ trợ.
| Trình duyệt Chrome | Firefox | trình duyệt web IE | Microsoft Edge | Opera | Cuộc đi săn | |
|---|---|---|---|---|---|---|
| Mac | Được hỗ trợ | Được hỗ trợ | N / A | Được hỗ trợ | Được hỗ trợ | Được hỗ trợ |
| các cửa sổ | Được hỗ trợ | Được hỗ trợ | Được hỗ trợ, IE10 + | Được hỗ trợ | Được hỗ trợ | Không được hỗ trợ |
Đối với Firefox, ngoài phiên bản ổn định thông thường mới nhất, chúng tôi cũng hỗ trợ phiên bản Firefox Phát hành Hỗ trợ Mở rộng (ESR) mới nhất.
Không chính thức, Bootstrap sẽ trông và hoạt động đủ tốt trong Chromium và Chrome dành cho Linux, Firefox dành cho Linux và Internet Explorer 9, mặc dù chúng không được hỗ trợ chính thức.
Để biết danh sách một số lỗi trình duyệt mà Bootstrap phải đối mặt, hãy xem Tường lỗi trình duyệt của chúng tôi .
trình duyệt web IE
Internet Explorer 10+ được hỗ trợ; IE9 trở xuống thì không. Xin lưu ý rằng một số thuộc tính CSS3 và phần tử HTML5 không được hỗ trợ đầy đủ trong IE10 hoặc yêu cầu các thuộc tính có tiền tố để có đầy đủ chức năng. Truy cập Tôi có thể sử dụng… để biết chi tiết về hỗ trợ trình duyệt của các tính năng CSS3 và HTML5. Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3.
Chế độ và danh sách thả xuống trên thiết bị di động
Tràn và cuộn
Hỗ trợ cho overflow: hidden;phần <body>tử này khá hạn chế trong iOS và Android. Để đạt được điều đó, khi bạn cuộn qua đầu hoặc cuối của một phương thức trong một trong hai trình duyệt của thiết bị đó, <body>nội dung sẽ bắt đầu cuộn. Xem lỗi Chrome # 175502 (đã sửa trong Chrome v40) và lỗi WebKit # 153852 .
Trường văn bản iOS và cuộn
Kể từ iOS 9.2, khi một phương thức đang mở, nếu lần chạm đầu tiên của cử chỉ cuộn nằm trong ranh giới của văn bản <input>hoặc a <textarea>, thì <body>nội dung bên dưới phương thức sẽ được cuộn thay vì chính phương thức đó. Xem lỗi WebKit # 153856 .
Thanh điều hướng thả xuống
Phần .dropdown-backdroptử không được sử dụng trên iOS trong điều hướng vì sự phức tạp của lập chỉ mục z. Do đó, để đóng danh sách thả xuống trong thanh điều hướng, bạn phải nhấp trực tiếp vào phần tử thả xuống (hoặc bất kỳ phần tử nào khác sẽ kích hoạt sự kiện nhấp chuột trong iOS ).
Phóng to trình duyệt
Tính năng phóng to trang chắc chắn sẽ hiển thị các tạo tác kết xuất trong một số thành phần, cả trong Bootstrap và phần còn lại của web. Tùy thuộc vào sự cố, chúng tôi có thể khắc phục nó (trước tiên hãy tìm kiếm và sau đó mở sự cố nếu cần). Tuy nhiên, chúng tôi có xu hướng bỏ qua những điều này vì chúng thường không có giải pháp trực tiếp nào ngoài các giải pháp hacky.
Sticky :hover/ :focustrên iOS
Mặc dù :hoverkhông thể thực hiện được trên hầu hết các thiết bị cảm ứng, nhưng iOS mô phỏng hành vi này, dẫn đến kiểu di chuột "cố định" vẫn tồn tại sau khi nhấn vào một phần tử. Các kiểu di chuột này chỉ bị xóa khi người dùng nhấn vào một phần tử khác. Hành vi này phần lớn được coi là không mong muốn và dường như không phải là vấn đề trên các thiết bị Android hoặc Windows.
Trong suốt các bản phát hành v4 alpha và beta, chúng tôi đã đưa vào mã chưa hoàn chỉnh và đã nhận xét để chọn tham gia miếng đệm truy vấn phương tiện sẽ vô hiệu hóa kiểu di chuột trong các trình duyệt thiết bị cảm ứng mô phỏng di chuột. Công việc này chưa bao giờ được hoàn thành hoặc được kích hoạt hoàn toàn, nhưng để tránh bị hỏng hoàn toàn, chúng tôi đã chọn không dùng miếng đệm này nữa và giữ các bản trộn làm phím tắt cho các lớp giả.
In ấn
Ngay cả trong một số trình duyệt hiện đại, việc in ấn có thể khá kỳ quặc.
Đối với Safari v8.0, việc sử dụng lớp có chiều rộng cố định .containercó thể khiến Safari sử dụng kích thước phông chữ nhỏ bất thường khi in. Xem sự cố # 14868 và lỗi WebKit # 138192 để biết thêm chi tiết. Một giải pháp tiềm năng là CSS sau:
@media print {
.container {
width: auto;
}
}
Trình duyệt cổ phiếu Android
Ngoài ra, Android 4.1 (và thậm chí một số bản phát hành mới hơn dường như) đi kèm với ứng dụng Trình duyệt làm trình duyệt web mặc định được lựa chọn (trái ngược với Chrome). Thật không may, ứng dụng Trình duyệt có rất nhiều lỗi và không nhất quán với CSS nói chung.
Chọn menu
Trên <select>các phần tử, trình duyệt Android stock sẽ không hiển thị các điều khiển bên nếu có border-radiusvà / hoặc borderđược áp dụng. (Xem câu hỏi StackOverflow này để biết chi tiết.) Sử dụng đoạn mã bên dưới để xóa CSS vi phạm và hiển thị <select>dưới dạng phần tử chưa được định kiểu trên trình duyệt Android stock. Tính năng phát hiện tác nhân người dùng tránh can thiệp vào các trình duyệt Chrome, Safari và 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>
Bạn muốn xem một ví dụ? Kiểm tra bản demo JS Bin này .
Trình xác thực
Để cung cấp trải nghiệm tốt nhất có thể cho các trình duyệt cũ và nhiều lỗi, Bootstrap sử dụng các bản hack trình duyệt CSS ở một số nơi để nhắm mục tiêu CSS đặc biệt đến các phiên bản trình duyệt nhất định để khắc phục lỗi trong chính trình duyệt. Có thể hiểu được những bản hack này khiến trình xác thực CSS phàn nàn rằng chúng không hợp lệ. Ở một số nơi, chúng tôi cũng sử dụng các tính năng CSS tiên tiến chưa được tiêu chuẩn hóa hoàn toàn, nhưng những tính năng này chỉ được sử dụng hoàn toàn để cải tiến liên tục.
Các cảnh báo xác thực này không quan trọng trong thực tế vì phần không hack trong CSS của chúng tôi xác thực hoàn toàn và các phần hack không ảnh hưởng đến hoạt động bình thường của phần không hack, do đó, tại sao chúng tôi cố tình bỏ qua các cảnh báo cụ thể này.
Tài liệu HTML của chúng tôi cũng có một số cảnh báo xác thực HTML nhỏ và không quan trọng do chúng tôi đưa vào giải pháp thay thế cho một số lỗi Firefox nhất định .