Tarayıcılar ve cihazlar
Her biri için bilinen tuhaflıklar ve hatalar dahil olmak üzere Bootstrap tarafından desteklenen modernden eskiye tüm tarayıcılar ve cihazlar hakkında bilgi edinin.
Bootstrap , tüm büyük tarayıcıların ve platformların en son, kararlı sürümlerini destekler. Windows'ta Internet Explorer 10-11 / Microsoft Edge'i destekliyoruz .
Doğrudan veya platformun web görünümü API'si aracılığıyla WebKit, Blink veya Gecko'nun en son sürümünü kullanan alternatif tarayıcılar açıkça desteklenmez. Ancak, Bootstrap (çoğu durumda) bu tarayıcılarda da düzgün şekilde görüntülenmeli ve çalışmalıdır. Daha spesifik destek bilgileri aşağıda verilmiştir.
Desteklenen tarayıcı yelpazemizi ve sürümlerini şurada bulabilirsinizpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Bu tarayıcı sürümlerini yönetmek için Browserslist'i kullanan CSS önekleri aracılığıyla amaçlanan tarayıcı desteğini işlemek için Autoprefixer kullanıyoruz. Bu araçları projelerinize nasıl entegre edeceğiniz konusunda belgelerine bakın.
Genel olarak konuşursak, Bootstrap her büyük platformun varsayılan tarayıcılarının en son sürümlerini destekler. Proxy tarayıcılarının (Opera Mini, Opera Mobile'ın Turbo modu, UC Tarayıcı Mini, Amazon Silk gibi) desteklenmediğini unutmayın.
| Krom | Firefox | Safari | Android Tarayıcı ve Web Görünümü | Microsoft Kenarı | |
|---|---|---|---|---|---|
| Android | Desteklenen | Desteklenen | Yok | Android v5.0+ desteklenir | Desteklenen |
| iOS | Desteklenen | Desteklenen | Desteklenen | Yok | Desteklenen |
| Windows 10 Mobil | Yok | Yok | Yok | Yok | Desteklenen |
Benzer şekilde, çoğu masaüstü tarayıcısının en son sürümleri desteklenir.
| Krom | Firefox | Internet Explorer | Microsoft Kenarı | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Desteklenen | Desteklenen | Yok | Yok | Desteklenen | Desteklenen |
| pencereler | Desteklenen | Desteklenen | Desteklenir, IE10+ | Desteklenen | Desteklenen | Desteklenmiyor |
Firefox için, en son normal kararlı sürüme ek olarak, Firefox'un en son Genişletilmiş Destek Sürümü (ESR) sürümünü de destekliyoruz.
Resmi olmayan bir şekilde Bootstrap, resmi olarak desteklenmese de Linux için Chromium ve Chrome, Linux için Firefox ve Internet Explorer 9'da yeterince iyi görünmeli ve davranmalıdır.
Bootstrap'in uğraşması gereken bazı tarayıcı hatalarının bir listesi için, tarayıcı hataları duvarımıza bakın .
Internet Explorer 10+ desteklenir; IE9 ve aşağı değil. Lütfen bazı CSS3 özelliklerinin ve HTML5 öğelerinin IE10'da tam olarak desteklenmediğini veya tam işlevsellik için ön ekli özellikler gerektirdiğini unutmayın. CSS3 ve HTML5 özelliklerinin tarayıcı desteğiyle ilgili ayrıntılar için Kullanabilir miyim… sayfasını ziyaret edin .
IE8-9 desteğine ihtiyacınız varsa Bootstrap 3'ü kullanın. Kodumuzun en kararlı sürümüdür ve kritik hata düzeltmeleri ve belge değişiklikleri için ekibimiz tarafından hala desteklenmektedir. Ancak buna yeni bir özellik eklenmeyecektir.
Öğe için destek overflow: hidden;, <body>iOS ve Android'de oldukça sınırlıdır. Bu amaçla, bu cihazların tarayıcılarından herhangi birinde bir modalın üstünü veya altını geçtiğinizde <body>içerik kaymaya başlar. Bkz. Chrome hatası #175502 (Chrome v40'ta düzeltildi) ve WebKit hatası #153852 .
iOS 9.2'den itibaren, bir kip açıkken, bir kaydırma hareketinin ilk dokunuşu bir metinsel <input>veya a sınırı içindeyse, kipin kendisi yerine kipin altındaki içerik kaydırılacaktır <textarea>. WebKit hatası #153856'ya<body> bakın .
Öğe , .dropdown-backdropz-indekslemenin karmaşıklığı nedeniyle gezinmede iOS'ta kullanılmaz. Bu nedenle, gezinme çubuklarındaki açılır listeleri kapatmak için, doğrudan açılır öğeye (veya iOS'ta bir tıklama olayını başlatacak herhangi bir başka öğeye ) tıklamanız gerekir.
Sayfa yakınlaştırma, kaçınılmaz olarak hem Bootstrap'ta hem de web'in geri kalanında bazı bileşenlerde görüntü oluşturma kusurları sunar. Soruna bağlı olarak, sorunu çözebiliriz (önce arama yapın ve gerekirse bir sorun açın). Ancak, genellikle geçici çözümlerden başka doğrudan bir çözümleri olmadığı için bunları görmezden gelme eğilimindeyiz.
Çoğu :hoverdokunmatik aygıtta mümkün olmasa da, iOS bu davranışı taklit eder ve bir öğeye dokunduktan sonra devam eden "yapışkan" fareyle üzerine gelme stilleriyle sonuçlanır. Bu fareyle üzerine gelme stilleri yalnızca kullanıcılar başka bir öğeye dokunduğunda kaldırılır. Bu davranış, büyük ölçüde istenmeyen olarak kabul edilir ve Android veya Windows cihazlarda bir sorun olarak görülmemektedir.
v4 alfa ve beta sürümlerimiz boyunca, gezinmeyi taklit eden dokunmatik cihaz tarayıcılarında vurgulu stillerini devre dışı bırakacak bir medya sorgusu ayarını seçmek için eksik ve yorumlanmış kod ekledik. Bu çalışma hiçbir zaman tam olarak tamamlanmadı veya etkinleştirilmedi, ancak tam kırılmayı önlemek için bu altlığı kullanımdan kaldırmayı ve mixin'leri sözde sınıflar için kısayollar olarak tutmayı seçtik.
Bazı modern tarayıcılarda bile yazdırma işlemi ilginç olabilir.
Safari v8.0'dan itibaren, sabit genişlikli .containersınıfın kullanılması, Safari'nin yazdırırken alışılmadık derecede küçük bir yazı tipi boyutu kullanmasına neden olabilir. Daha fazla ayrıntı için sayı #14868 ve WebKit hatası #138192'ye bakın. Olası bir geçici çözüm aşağıdaki CSS'dir:
@media print {
.container {
width: auto;
}
}Kutunun dışında, Android 4.1 (ve görünüşe göre bazı daha yeni sürümler), varsayılan web tarayıcısı olarak (Chrome'un aksine) Tarayıcı uygulamasıyla birlikte gelir. Ne yazık ki, Tarayıcı uygulamasında genel olarak CSS ile çok sayıda hata ve tutarsızlık var.
Öğelerde , bir ve/veya uygulanmışsa <select>, Android hisse senedi tarayıcısı yan kontrolleri görüntülemeyecektir . (Ayrıntılar için bu StackOverflow sorusuna bakın.) Sorunlu CSS'yi kaldırmak ve Android stok tarayıcısında stili olmayan bir öğe olarak işlemek için aşağıdaki kod parçasını kullanın . Kullanıcı aracısı koklama, Chrome, Safari ve Mozilla tarayıcılarıyla etkileşimi önler.border-radiusborder<select>
<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>Bir örnek görmek ister misiniz? Bu JS Bin demosuna göz atın.
Bootstrap, eski ve sorunlu tarayıcılara mümkün olan en iyi deneyimi sağlamak için, tarayıcılardaki hataları gidermek için belirli tarayıcı sürümlerine özel CSS'yi hedeflemek için çeşitli yerlerde CSS tarayıcı hack'lerini kullanır. Bu saldırılar anlaşılır bir şekilde CSS doğrulayıcılarının geçersiz olduklarından şikayet etmelerine neden olur. Birkaç yerde, henüz tam olarak standartlaştırılmamış son teknoloji CSS özelliklerini de kullanıyoruz, ancak bunlar yalnızca aşamalı geliştirme için kullanılıyor.
Bu doğrulama uyarıları, CSS'mizin korsan olmayan kısmı tam olarak doğrulandığından ve hileli kısımlar, korsan olmayan kısmın düzgün çalışmasına müdahale etmediğinden pratikte önemli değildir, bu nedenle bu özel uyarıları kasıtlı olarak görmezden gelmemizin nedeni budur.
HTML belgelerimiz de benzer şekilde, belirli bir Firefox hatası için bir geçici çözüm eklediğimiz için bazı önemsiz ve önemsiz HTML doğrulama uyarılarına sahiptir .