Source

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

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

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

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

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

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

באופן כללי, 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>התוכן שמתחת למודאל יגולל במקום המודאל עצמו. ראה באג ב-WebKit #153856 .

האלמנט .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.

מאמתים

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

אזהרות אימות אלו אינן חשובות בפועל, מכיוון שהחלק הלא-האקי של ה-CSS שלנו אכן תוקף במלואו והחלקים האקי אינם מפריעים לתפקוד התקין של החלק הלא-האקי, ומכאן מדוע אנו מתעלמים בכוונה מהאזהרות המסוימות הללו.

כמו כן, למסמכי ה-HTML שלנו יש כמה אזהרות אימות HTML טריוויאליות וחסרות משמעות עקב הכללתנו של פתרון לעקיפת באג מסוים ב-Firefox .