Penyemak imbas dan peranti
Ketahui tentang penyemak imbas dan peranti, daripada moden hingga lama, yang disokong oleh Bootstrap, termasuk kebiasaan dan pepijat yang diketahui untuk setiap satu.
Penyemak imbas yang disokong
Bootstrap menyokong keluaran terbaharu dan stabil bagi semua pelayar dan platform utama. Pada Windows, kami menyokong Internet Explorer 10-11 / Microsoft Edge .
Penyemak imbas alternatif yang menggunakan versi terkini WebKit, Blink atau Gecko, sama ada secara langsung atau melalui API paparan web platform, tidak disokong secara eksplisit. Walau bagaimanapun, Bootstrap harus (dalam kebanyakan kes) memaparkan dan berfungsi dengan betul dalam pelayar ini juga. Maklumat sokongan yang lebih khusus disediakan di bawah.
Anda boleh mendapatkan rangkaian penyemak imbas kami yang disokong dan versinya dalam.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
Kami menggunakan Autoprefixer untuk mengendalikan sokongan penyemak imbas yang dimaksudkan melalui awalan CSS, yang menggunakan Senarai Pelayar untuk mengurus versi penyemak imbas ini. Rujuk dokumentasi mereka untuk cara menyepadukan alatan ini ke dalam projek anda.
Peranti mudah alih
Secara umumnya, Bootstrap menyokong versi terkini setiap pelayar lalai platform utama. Harap maklum bahawa penyemak imbas proksi (seperti Opera Mini, mod Turbo Opera Mobile, UC Browser Mini, Amazon Silk) tidak disokong.
| Chrome | Firefox | Safari | Pelayar Android & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Disokong | Disokong | T/A | Android v5.0+ disokong | Disokong |
| iOS | Disokong | Disokong | Disokong | T/A | Disokong |
| Windows 10 Mudah Alih | T/A | T/A | T/A | T/A | Disokong |
Pelayar desktop
Begitu juga, versi terkini kebanyakan penyemak imbas desktop disokong.
| Chrome | Firefox | internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Disokong | Disokong | T/A | Disokong | Disokong | Disokong |
| Windows | Disokong | Disokong | Disokong, IE10+ | Disokong | Disokong | Tidak disokong |
Untuk Firefox, sebagai tambahan kepada keluaran stabil biasa yang terkini, kami juga menyokong versi Extended Support Release (ESR) Firefox yang terkini.
Secara tidak rasmi, Bootstrap sepatutnya kelihatan dan berkelakuan cukup baik dalam Chromium dan Chrome untuk Linux, Firefox untuk Linux dan Internet Explorer 9, walaupun ia tidak disokong secara rasmi.
Untuk senarai beberapa pepijat penyemak imbas yang perlu dihadapi oleh Bootstrap, lihat Dinding pepijat penyemak imbas kami .
internet Explorer
Internet Explorer 10+ disokong; IE9 dan ke bawah tidak. Harap maklum bahawa sesetengah sifat CSS3 dan elemen HTML5 tidak disokong sepenuhnya dalam IE10, atau memerlukan sifat awalan untuk kefungsian penuh. Lawati Bolehkah saya menggunakan… untuk mendapatkan butiran tentang sokongan penyemak imbas ciri CSS3 dan HTML5. Jika anda memerlukan sokongan IE8-9, gunakan Bootstrap 3.
Modal dan lungsur turun pada mudah alih
Limpahan dan menatal
Sokongan untuk overflow: hidden;pada <body>elemen agak terhad dalam iOS dan Android. Untuk itu, apabila anda menatal melepasi bahagian atas atau bawah mod dalam salah satu daripada pelayar peranti tersebut, <body>kandungan akan mula menatal. Lihat pepijat Chrome #175502 (dibetulkan dalam Chrome v40) dan pepijat WebKit #153852 .
Medan teks iOS dan menatal
Mulai iOS 9.2, semasa modal dibuka, jika sentuhan awal gerak isyarat tatal berada dalam sempadan teks <input>atau <textarea>, <body>kandungan di bawah modal akan ditatal dan bukannya modal itu sendiri. Lihat pepijat WebKit #153856 .
Navbar Dropdown
Elemen .dropdown-backdropini tidak digunakan pada iOS dalam navigasi kerana kerumitan pengindeksan-z. Oleh itu, untuk menutup menu lungsur dalam bar navigasi, anda mesti mengklik terus elemen lungsur turun (atau mana-mana elemen lain yang akan melancarkan acara klik dalam iOS ).
Pengezum penyemak imbas
Zum halaman tidak dapat dielakkan mempersembahkan artifak pemaparan dalam beberapa komponen, kedua-duanya dalam Bootstrap dan seluruh web. Bergantung pada isu itu, kami mungkin dapat membetulkannya (cari dahulu dan kemudian buka isu jika perlu). Walau bagaimanapun, kami cenderung untuk mengabaikan perkara ini kerana ia selalunya tidak mempunyai penyelesaian langsung selain daripada penyelesaian yang meretas.
Melekit :hover/ :focuspada iOS
Walaupun :hovertidak boleh dilakukan pada kebanyakan peranti sentuh, iOS mencontohi tingkah laku ini, menghasilkan gaya tuding "melekit" yang berterusan selepas mengetik satu elemen. Gaya tuding ini hanya dialih keluar apabila pengguna mengetik elemen lain. Tingkah laku ini dianggap sebahagian besarnya tidak diingini dan nampaknya tidak menjadi isu pada peranti Android atau Windows.
Sepanjang keluaran v4 alfa dan beta kami, kami menyertakan kod yang tidak lengkap dan mengulas keluar untuk mengikut serta ke shim pertanyaan media yang akan melumpuhkan gaya tuding dalam penyemak imbas peranti sentuh yang meniru tuding. Kerja ini tidak pernah disiapkan atau didayakan sepenuhnya, tetapi untuk mengelakkan kerosakan sepenuhnya, kami telah memilih untuk menghentikan shim ini dan mengekalkan mixin sebagai pintasan untuk kelas pseudo.
Mencetak
Malah dalam sesetengah penyemak imbas moden, percetakan boleh menjadi pelik.
Mulai Safari v8.0, penggunaan kelas lebar tetap .containerboleh menyebabkan Safari menggunakan saiz fon yang luar biasa kecil semasa mencetak. Lihat isu #14868 dan pepijat WebKit #138192 untuk mendapatkan butiran lanjut. Satu penyelesaian yang berpotensi ialah CSS berikut:
@media print {
.container {
width: auto;
}
}
Penyemak imbas saham Android
Di luar kotak, Android 4.1 (dan juga beberapa keluaran yang lebih baharu nampaknya) dihantar dengan apl Penyemak Imbas sebagai penyemak imbas web lalai pilihan (berbanding dengan Chrome). Malangnya, apl Penyemak Imbas mempunyai banyak pepijat dan tidak konsisten dengan CSS secara umum.
Pilih menu
Pada <select>elemen, penyemak imbas saham Android tidak akan memaparkan kawalan sisi jika terdapat border-radiusdan/atau borderdigunakan. (Lihat soalan StackOverflow ini untuk mendapatkan butiran.) Gunakan coretan kod di bawah untuk mengalih keluar CSS yang menyinggung perasaan dan menjadikannya <select>sebagai elemen tidak digayakan pada penyemak imbas saham Android. Ejen pengguna menghidu mengelakkan gangguan dengan penyemak imbas Chrome, Safari dan 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>
Nak tengok contoh? Lihat demo JS Bin ini .
Pengesah
Untuk memberikan pengalaman terbaik kepada penyemak imbas lama dan buggy, Bootstrap menggunakan penggodam penyemak imbas CSS di beberapa tempat untuk menyasarkan CSS khas kepada versi penyemak imbas tertentu untuk mengatasi pepijat dalam penyemak imbas itu sendiri. Penggodaman ini boleh difahami menyebabkan pengesah CSS mengadu bahawa ia tidak sah. Di beberapa tempat, kami juga menggunakan ciri CSS bleeding-edge yang belum diseragamkan sepenuhnya, tetapi ini digunakan semata-mata untuk peningkatan progresif.
Amaran pengesahan ini tidak penting dalam amalan kerana bahagian CSS kami yang tidak digodam mengesahkan sepenuhnya dan bahagian yang digodam tidak mengganggu fungsi bahagian yang tidak digodam dengan betul, oleh itu sebab kami sengaja mengabaikan amaran ini.
Dokumen HTML kami juga mempunyai beberapa amaran pengesahan HTML yang remeh dan tidak penting kerana kami memasukkan penyelesaian untuk pepijat Firefox tertentu .