المتصفحات والأجهزة
تعرف على المتصفحات والأجهزة ، من الحديثة إلى القديمة ، التي يدعمها Bootstrap ، بما في ذلك المراوغات والأخطاء المعروفة لكل منها.
يدعم Bootstrap أحدث الإصدارات الثابتة لجميع المتصفحات والأنظمة الأساسية. في نظام التشغيل Windows ، ندعم Internet Explorer 10-11 / Microsoft Edge .
لا يتم دعم المتصفحات البديلة التي تستخدم أحدث إصدار من WebKit أو Blink أو Gecko ، سواء بشكل مباشر أو عبر واجهة برمجة تطبيقات عرض الويب للنظام الأساسي ، بشكل صريح. ومع ذلك ، يجب أن يعرض Bootstrap (في معظم الحالات) ويعمل بشكل صحيح في هذه المتصفحات أيضًا. يتم توفير معلومات دعم أكثر تحديدًا أدناه.
يمكنك العثور على مجموعة المتصفحات المدعومة وإصداراتها فيpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
نحن نستخدم Autoprefixer للتعامل مع دعم المتصفح المقصود عبر بادئات CSS ، والتي تستخدم Browserslist لإدارة إصدارات المستعرض هذه. استشر وثائقهم لمعرفة كيفية دمج هذه الأدوات في مشاريعك.
بشكل عام ، يدعم 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.
من أجل توفير أفضل تجربة ممكنة للمتصفحات القديمة وعربات التي تجرها الدواب ، يستخدم Bootstrap اختراق مستعرض CSS في عدة أماكن لاستهداف CSS خاص لإصدارات معينة من المتصفح من أجل التغلب على الأخطاء الموجودة في المتصفحات نفسها. تتسبب هذه الاختراقات في جعل مدققي CSS يشكون من عدم صلاحيتهم. في مكانين ، نستخدم أيضًا ميزات CSS المتطورة التي لم يتم توحيدها بالكامل بعد ، ولكن يتم استخدامها فقط للتحسين التدريجي.
لا تهم تحذيرات التحقق هذه من الناحية العملية نظرًا لأن الجزء غير المخترق من CSS الخاص بنا يتحقق بشكل كامل ولا تتداخل أجزاء الاختراق مع الأداء السليم للجزء غير المخترق ، ومن ثم فإننا نتجاهل هذه التحذيرات الخاصة عمدًا.
تحتوي مستندات HTML أيضًا على بعض التحذيرات التافهة وغير المهمة للتحقق من صحة HTML نظرًا لتضميننا حلًا بديلًا لخلل معين في Firefox .