المتصفحات والأجهزة
تعرف على المتصفحات والأجهزة ، من الحديثة إلى القديمة ، التي يدعمها Bootstrap ، بما في ذلك المراوغات والأخطاء المعروفة لكل منها.
يدعم Bootstrap أحدث الإصدارات الثابتة لجميع المتصفحات والأنظمة الأساسية. في نظام التشغيل Windows ، ندعم Internet Explorer 10-11 / Microsoft Edge .
لا يتم دعم المتصفحات البديلة التي تستخدم أحدث إصدار من WebKit أو Blink أو Gecko ، سواء بشكل مباشر أو عبر واجهة برمجة تطبيقات عرض الويب للنظام الأساسي ، بشكل صريح. ومع ذلك ، يجب أن يعرض Bootstrap (في معظم الحالات) ويعمل بشكل صحيح في هذه المتصفحات أيضًا. يتم توفير معلومات دعم أكثر تحديدًا أدناه.
بشكل عام ، يدعم Bootstrap أحدث الإصدارات من المتصفحات الافتراضية لكل منصة رئيسية. لاحظ أن المتصفحات الوكيلة (مثل Opera Mini و Opera Mobile's Turbo mode و UC Browser Mini و Amazon Silk) غير مدعومة.
| كروم | ثعلب النار | سفاري | متصفح Android و WebView | مايكروسوفت ايدج | |
|---|---|---|---|---|---|
| ذكري المظهر | أيد | أيد | غير متاح | دعم Android v5.0 + | أيد |
| iOS | أيد | أيد | أيد | غير متاح | أيد |
| ويندوز 10 موبايل | غير متاح | غير متاح | غير متاح | غير متاح | أيد |
وبالمثل ، يتم دعم أحدث إصدارات معظم متصفحات سطح المكتب.
| كروم | ثعلب النار | متصفح الانترنت | مايكروسوفت ايدج | أوبرا | سفاري | |
|---|---|---|---|---|---|---|
| ماك | أيد | أيد | غير متاح | غير متاح | أيد | أيد |
| شبابيك | أيد | أيد | مدعوم ، IE10 + | أيد | أيد | غير مدعوم |
بالنسبة إلى Firefox ، بالإضافة إلى أحدث إصدار ثابت عادي ، فإننا ندعم أيضًا أحدث إصدار من إصدار الدعم الموسع (ESR) من Firefox.
بشكل غير رسمي ، يجب أن يبدو Bootstrap ويتصرف بشكل جيد بما فيه الكفاية في Chromium و Chrome لنظام التشغيل Linux و Firefox لنظام التشغيل Linux و Internet Explorer 9 ، على الرغم من عدم دعمها رسميًا.
للحصول على قائمة ببعض أخطاء المتصفح التي يتعين على Bootstrap التعامل معها ، راجع جدار أخطاء المتصفح .
يتم دعم Internet Explorer 10+ ؛ IE9 وهبوطا ليست كذلك. يرجى العلم أن بعض خصائص CSS3 وعناصر HTML5 غير مدعومة بالكامل في IE10 ، أو تتطلب خصائص مسبوقة للحصول على الوظائف الكاملة. تفضل بزيارة هل يمكنني استخدام ... للحصول على تفاصيل حول دعم المتصفح لميزات CSS3 و HTML5.
إذا كنت بحاجة إلى دعم IE8-9 ، فاستخدم Bootstrap 3. إنه الإصدار الأكثر استقرارًا من الكود الخاص بنا ولا يزال مدعومًا من قبل فريقنا لإصلاح الأخطاء الهامة وتغييرات التوثيق. ومع ذلك ، لن يتم إضافة ميزات جديدة إليها.
دعم overflow: hidden;العنصر <body>محدود للغاية في iOS و Android. تحقيقا لهذه الغاية ، عندما تقوم بالتمرير إلى ما بعد الجزء العلوي أو السفلي من الوسائط في أي من متصفحات تلك الأجهزة ، <body>سيبدأ المحتوى في التمرير. راجع خطأ Chrome رقم 175502 (تم الإصلاح في Chrome v40) وخطأ WebKit رقم 153852 .
اعتبارًا من iOS 9.2 ، أثناء فتح النموذج ، إذا كانت اللمسة الأولية لإيماءة التمرير داخل حدود النص <input>أو a <textarea>، <body>فسيتم تمرير المحتوى الموجود أسفل النموذج بدلاً من النموذج نفسه. راجع خطأ WebKit # 153856 .
لا يتم .dropdown-backdropاستخدام العنصر في نظام التشغيل iOS في التنقل بسبب تعقيد فهرسة z. وبالتالي ، لإغلاق القوائم المنسدلة في أشرطة التنقل ، يجب أن تنقر مباشرةً على عنصر القائمة المنسدلة (أو أي عنصر آخر سيطلق حدث نقرة في iOS ).
يعرض تكبير الصفحة حتمًا عيوبًا في العرض في بعض المكونات ، في كل من Bootstrap وبقية الويب. اعتمادًا على المشكلة ، قد نتمكن من إصلاحها (ابحث أولاً ثم افتح المشكلة إذا لزم الأمر). ومع ذلك ، فإننا نميل إلى تجاهلها نظرًا لعدم وجود حل مباشر لها في كثير من الأحيان بخلاف الحلول البديلة.
على الرغم :hoverمن عدم إمكانية ذلك في معظم الأجهزة التي تعمل باللمس ، إلا أن iOS يحاكي هذا السلوك ، مما يؤدي إلى ظهور أنماط تحوم "ثابتة" تستمر بعد النقر على عنصر واحد. تتم إزالة أنماط التمرير هذه فقط عندما ينقر المستخدمون على عنصر آخر. يعتبر هذا السلوك غير مرغوب فيه إلى حد كبير ويبدو أنه لا يمثل مشكلة على أجهزة Android أو Windows.
خلال إصدارات v4 alpha و beta الخاصة بنا ، قمنا بتضمين رمز غير مكتمل وعلقنا عليه للاشتراك في حزمة استعلام الوسائط التي من شأنها تعطيل أنماط التمرير في متصفحات الأجهزة التي تعمل باللمس والتي تحاكي التحويم. لم يكتمل هذا العمل أو تم تمكينه بالكامل ، ولكن لتجنب الانكسار الكامل ، اخترنا إهمال هذا الرقاقة والحفاظ على الخلطات كاختصارات للفئات الزائفة.
حتى في بعض المتصفحات الحديثة ، يمكن أن تكون الطباعة غريبة.
اعتبارًا من الإصدار 8.0 من Safari ، .containerيمكن أن يؤدي استخدام فئة العرض الثابت إلى استخدام Safari لحجم خط صغير بشكل غير عادي عند الطباعة. راجع الإصدار رقم 14868 وخطأ WebKit رقم 138192 لمزيد من التفاصيل. أحد الحلول المحتملة هو CSS التالية:
@media print {
.container {
width: auto;
}
}من خارج الصندوق ، يأتي Android 4.1 (وحتى بعض الإصدارات الأحدث على ما يبدو) مع تطبيق Browser باعتباره متصفح الويب الافتراضي المفضل (على عكس Chrome). لسوء الحظ ، يحتوي تطبيق Browser على الكثير من الأخطاء والتناقضات مع CSS بشكل عام.
فيما يتعلق <select>بالعناصر ، لن يعرض متصفح Android Stock عناصر التحكم الجان��ية إذا كان هناك 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.
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.
These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
تحتوي مستندات HTML أيضًا على بعض التحذيرات التافهة وغير المهمة للتحقق من صحة HTML نظرًا لتضميننا حلًا بديلًا لخلل معين في Firefox .