ブラウザーとデバイス

最新のものから古いものまで、Bootstrap でサポートされているブラウザーとデバイスについて、それぞれの既知の癖やバグを含めて学びます。

このページでは

対応ブラウザ

Bootstrap は、すべての主要なブラウザーとプラットフォームの最新の安定したリリースをサポートしています。

WebKit、Blink、または Gecko の最新バージョンを使用する代替ブラウザーは、直接またはプラットフォームの Web ビュー API を介して、明示的にサポートされていません。ただし、Bootstrap は (ほとんどの場合) これらのブラウザーでも正しく表示および機能するはずです。より具体的なサポート情報を以下に示します。

サポートされているブラウザの範囲とそのバージョンは、.browserslistrc file次の URL で確認できます。

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11

Autoprefixerを使用して、CSS プレフィックスを介して目的のブラウザーサポートを処理します。CSS プレフィックスは、Browserslistを使用してこれらのブラウザーバージョンを管理します。これらのツールをプロジェクトに統合する方法については、ドキュメントを参照してください。

モバイルデバイス

一般的に言えば、Bootstrap は各主要プラットフォームのデフォルトブラウザの最新バージョンをサポートしています。プロキシブラウザ (Opera Mini、Opera Mobile の Turbo モード、UC Browser Mini、Amazon Silk など) はサポートされていないことに注意してください。

	クロム	ファイアフォックス	サファリ	Android ブラウザと WebView
アンドロイド	対応	対応	—	v6.0+
iOS	対応	対応	対応	—

デスクトップブラウザ

同様に、ほとんどのデスクトップブラウザの最新バージョンがサポートされています。

	クロム	ファイアフォックス	マイクロソフトエッジ	オペラ	サファリ
マック	対応	対応	対応	対応	対応
ウィンドウズ	対応	対応	対応	対応	—

Firefox については、最新の通常の安定版リリースに加えて、Firefox の最新のExtended Support Release (ESR)バージョンもサポートしています。

非公式には、Bootstrap は Linux の Chromium と Chrome、および Linux の Firefox で十分に表示され、適切に動作するはずですが、これらは公式にはサポートされていません。

インターネットエクスプローラ

Internet Explorer はサポートされていません。Internet Explorer のサポートが必要な場合は、Bootstrap v4 を使用してください。

モバイルのモーダルとドロップダウン

オーバーフローとスクロール

overflow: hidden;on 要素のサポートは<body>、iOS と Android ではかなり制限されています。そのために、これらのデバイスのブラウザのいずれかでモーダルの上部または下部をスクロールすると、<body>コンテンツがスクロールし始めます。Chrome バグ #175502 (Chrome v40 で修正済み) とWebKit バグ #153852を参照してください。

iOS テキストフィールドとスクロール

iOS 9.2 の時点で、モーダルが開いている間、スクロールジェスチャの最初のタッチがテキスト<input>またはの境界内にある場合、モーダル自体ではなく、モーダルの下のコンテンツがスクロールされます<textarea>。WebKit バグ #153856<body>を参照してください。

z-indexing が複雑なため、この.dropdown-backdrop要素は iOS のナビゲーションでは使用されません。したがって、ナビゲーションバーのドロップダウンを閉じるには、ドロップダウン要素 (またはiOS でクリックイベントを発生させるその他の要素) を直接クリックする必要があります。

ブラウザのズーム

ページのズームは、Bootstrap と Web の残りの部分の両方で、一部のコンポーネントでレンダリングアーティファクトを必然的に提示します。問題によっては、修正できる場合があります (最初に検索してから、必要に応じて問題を開きます)。ただし、ハッキーな回避策以外に直接的な解決策がないことが多いため、これらを無視する傾向があります。

バリデーター

古いバグのあるブラウザに可能な限り最高のエクスペリエンスを提供するために、Bootstrap はいくつかの場所でCSS ブラウザハックを使用して、ブラウザ自体のバグを回避するために特定のブラウザバージョンに特別な CSS をターゲットにします。これらのハッキングにより、当然のことながら、CSS バリデーターは無効であると不平を言います。いくつかの場所では、まだ完全に標準化されていない最先端の CSS 機能も使用していますが、これらは純粋にプログレッシブエンハンスメントのために使用されています。

これらの検証警告は、CSS の非ハック部分が完全に検証され、ハック部分が非ハック部分の適切な機能を妨げないため、実際には問題になりません。したがって、これらの特定の警告を意図的に無視する理由です。

私たちの HTML ドキュメントにも、特定の Firefox のバグに対する回避策が含まれているため、些細で取るに足らない HTML 検証警告がいくつかあります。