in English

דפדפנים ומכשירים

למד על הדפדפנים והמכשירים, מהמודרניים ועד הישנים, הנתמכים על ידי Bootstrap, כולל מוזרויות ובאגים ידועים לכל אחד מהם.

דפדפנים נתמכים

Bootstrap תומך במהדורות האחרונות והיציבות של כל הדפדפנים והפלטפורמות הגדולות. ב-Windows, אנו תומכים ב-Internet Explorer 10-11 / Microsoft Edge .

דפדפנים חלופיים המשתמשים בגרסה העדכנית ביותר של WebKit, Blink או Gecko, בין אם ישירות או באמצעות ממשק ה-API של תצוגת האינטרנט של הפלטפורמה, אינם נתמכים במפורש. עם זאת, Bootstrap אמור (ברוב המקרים) להציג ולתפקד כהלכה גם בדפדפנים אלו. מידע תמיכה ספציפי יותר מסופק להלן.

אתה יכול למצוא את מגוון הדפדפנים הנתמך שלנו ואת הגרסאות שלהם ב.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

אנו משתמשים ב- Autoprefixer כדי לטפל בתמיכה בדפדפן המיועדת באמצעות קידומות CSS, המשתמשת ב- Browserlist כדי לנהל את גרסאות הדפדפן הללו. עיין בתיעוד שלהם כיצד לשלב את הכלים הללו בפרויקטים שלך.

מכשירים ניידים

באופן כללי, Bootstrap תומך בגרסאות האחרונות של דפדפני ברירת המחדל של כל פלטפורמה מרכזית. שים לב שדפדפני פרוקסי (כגון Opera Mini, מצב הטורבו של Opera Mobile, UC Browser Mini, Amazon Silk) אינם נתמכים.

כרום פיירפוקס ספארי דפדפן אנדרואיד ו-WebView מיקרוסופט אדג
דְמוּי אָדָם נתמך נתמך לא Android v5.0+ נתמך נתמך
iOS נתמך נתמך נתמך לא נתמך
Windows 10 Mobile לא לא לא לא נתמך

דפדפנים שולחניים

באופן דומה, הגירסאות העדכניות ביותר של רוב הדפדפנים למחשבים שולחניים נתמכות.

כרום פיירפוקס אינטרנט אקספלורר מיקרוסופט אדג אוֹפֵּרָה ספארי
מק נתמך נתמך לא נתמך נתמך נתמך
חלונות נתמך נתמך נתמך, IE10+ נתמך נתמך אינו נתמך

עבור Firefox, בנוסף לגרסה היציבה הרגילה האחרונה, אנו תומכים גם בגרסה העדכנית ביותר של Extended Support Release (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 ואנדרואיד. לשם כך, כאשר תגללו מעבר לחלק העליון או התחתון של מודאל בכל אחד מהדפדפנים של אותם מכשירים, <body>התוכן יתחיל לגלול. ראה באג Chrome #175502 (תוקן ב-Chrome v40) ובאג WebKit #153852 .

שדות טקסט ב-iOS וגלילה

החל מ-iOS 9.2, בעוד מודאל פתוח, אם הנגיעה הראשונית של תנועת גלילה היא בגבול של טקסט <input>או <textarea>, <body>התוכן שמתחת למודאל יגולל במקום המודאל עצמו. ראה באג #153856 של WebKit .

האלמנט .dropdown-backdropאינו בשימוש ב-iOS ב-nav בגלל המורכבות של יצירת אינדקס z. לפיכך, כדי לסגור תפריטים נפתחים בסרגלי הניווט, עליך ללחוץ ישירות על רכיב התפריט הנפתח (או כל רכיב אחר שיפעיל אירוע קליק ב-iOS ).

התקרבות הדפדפן

התקרבות עמודים מציגה בהכרח חפצי עיבוד בחלק מהרכיבים, הן ב-Bootstrap והן בשאר האינטרנט. בהתאם לבעיה, ייתכן שנוכל לתקן אותה (חפש תחילה ולאחר מכן פתח בעיה במידת הצורך). עם זאת, אנו נוטים להתעלם מאלה מכיוון שלעתים קרובות אין להם פתרון ישיר מלבד דרכים לעקיפת הבעיה.

Sticky :hover/ :focusב-iOS

למרות :hoverשזה לא אפשרי ברוב מכשירי המגע, iOS מחקה התנהגות זו, וכתוצאה מכך סגנונות ריחוף "דביקים" שנמשכים לאחר הקשה על אלמנט אחד. סגנונות ריחוף אלה מוסרים רק כאשר משתמשים מקישים על רכיב אחר. התנהגות זו נחשבת בלתי רצויה ברובה ונראה שאינה מהווה בעיה במכשירי אנדרואיד או Windows.

לאורך מהדורות v4 אלפא וביטא שלנו, כללנו קוד חלקי וחסר הערות עבור הצטרפות ל-Shim של שאילתת מדיה שישבית סגנונות ריחוף בדפדפני מכשירי מגע המדמים ריחוף. העבודה הזו מעולם לא הושלמה או הופעלה במלואה, אבל כדי למנוע שבירה מוחלטת, בחרנו לבטל את ה- shim הזה ולהשאיר את המיקסים כקיצורי דרך לפסאודו-שיעורים.

הַדפָּסָה

אפילו בחלק מהדפדפנים המודרניים, הדפסה יכולה להיות מוזרה.

החל מ-Safari v8.0, שימוש .containerבמחלקה ברוחב קבוע עלול לגרום ל-Safari להשתמש בגודל גופן קטן במיוחד בעת ההדפסה. עיין בבעיה מס' 14868 ובאג ב- WebKit מס' 138192 לפרטים נוספים. פתרון אפשרי אחד הוא ה-CSS הבא:

@media print {
  .container {
    width: auto;
  }
}

דפדפן מניות אנדרואיד

מחוץ לקופסה, אנדרואיד 4.1 (ואפילו כמה מהדורות חדשות יותר ככל הנראה) נשלחות עם אפליקציית הדפדפן כדפדפן האינטרנט המוגדר כברירת מחדל (בניגוד לכרום). לרוע המזל, באפליקציית הדפדפן יש הרבה באגים וחוסר עקביות עם CSS באופן כללי.

בחר תפריט

ברכיבים, דפדפן המניות של Android <select>לא יציג את פקדי הצד אם יש border-radiusו/או borderמוחל. (ראה שאלה זו של StackOverflow לפרטים.) השתמש בקטע הקוד שלהלן כדי להסיר את ה-CSS הפוגע ולעבד אותו <select>כרכיב לא מעוצב בדפדפן המניות של Android. סוכן המשתמש המרחרח מונע הפרעה לדפדפני Chrome, Safari ומוזילה.

<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 .

Validators

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 .