ブラウザとデバイス
Bootstrapでサポートされている、最新のブラウザとデバイスから古いものまでについて、各ブラウザの既知の癖やバグを含めて説明します。
サポートされているブラウザ
Bootstrapは、主要なすべてのブラウザとプラットフォームの**最新の安定版リリース**をサポートしています。
WebKit、Blink、またはGeckoの最新バージョンを直接またはプラットフォームのウェブビューAPIを介して使用する代替ブラウザは、明示的にサポートされていません。ただし、Bootstrapは(ほとんどの場合)これらのブラウザでも正しく表示および機能するはずです。より具体的なサポート情報は以下に記載されています。
サポートされているブラウザとバージョンの範囲は、.browserslistrcファイル
で確認できます。
# 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
CSSプレフィックスを介して意図したブラウザサポートを処理するために、Autoprefixerを使用しています。これは、Browserslistを使用してこれらのブラウザバージョンを管理しています。これらのツールをプロジェクトに統合する方法については、それぞれのドキュメントを参照してください。
モバイルデバイス
一般的に、Bootstrapは主要な各プラットフォームのデフォルトブラウザの最新バージョンをサポートしています。プロキシブラウザ(Opera Mini、Opera Mobileのターボモード、UC Browser Mini、Amazon Silkなど)はサポートされていません。
Chrome | Firefox | Safari | AndroidブラウザとWebView | |
---|---|---|---|---|
Android | サポート | サポート | — | v6.0+ |
iOS | サポート | サポート | サポート | — |
デスクトップブラウザ
同様に、ほとんどのデスクトップブラウザの最新バージョンがサポートされています。
Chrome | Firefox | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|
Mac | サポート | サポート | サポート | サポート | サポート |
Windows | サポート | サポート | サポート | サポート | — |
Firefoxについては、最新の通常の安定版リリースに加えて、最新の拡張サポートリリース(ESR)バージョンもサポートしています。
非公式には、BootstrapはLinux向けのChromiumとChrome、およびLinux向けのFirefoxでも十分に良好に動作するはずです。ただし、これらは公式にはサポートされていません。
Internet Explorer
Internet Explorerはサポートされていません。**Internet Explorerのサポートが必要な場合は、Bootstrap v4を使用してください。**
モバイルでのモーダルとドロップダウン
オーバーフローとスクロール
<body>
要素のoverflow: hidden;
のサポートは、iOSとAndroidでは非常に限られています。そのため、これらのデバイスのいずれかのブラウザでモーダルの上部または下部を超えてスクロールすると、<body>
コンテンツがスクロールし始めます。Chromeバグ #175502(Chrome v40で修正)とWebKitバグ #153852を参照してください。
iOSのテキストフィールドとスクロール
iOS 9.2以降、モーダルが開いている場合、スクロールジェスチャの最初のタッチがテキストの<input>
または<textarea>
の境界内にあると、モーダルの下にある<body>
コンテンツがモーダル自体ではなくスクロールされます。WebKitバグ #153856を参照してください。
ナビバーのドロップダウン
z-インデックスの複雑さのため、ナビゲーションではiOSで.dropdown-backdrop
要素は使用されません。したがって、ナビゲーションバーでドロップダウンを閉じるには、ドロップダウン要素を直接クリックする必要があります(またはiOSでクリックイベントを発生させるその他の要素)。
ブラウザのズーム
ページのズームは、BootstrapとWebの他の部分の両方で、一部のコンポーネントにレンダリングアーティファクトが発生する可能性があります。問題に応じて、修正できる場合があります(最初に検索し、必要に応じて問題を報告してください)。ただし、多くの場合、ハッキーな回避策以外の直接的な解決策がないため、これらは無視する傾向があります。
バリデータ
古くバグのあるブラウザにも可能な限り最高のエクスペリエンスを提供するために、Bootstrapはいくつかの場所でCSSブラウザハックを使用して、特定のバージョンのブラウザに特別なCSSをターゲットし、ブラウザ自体のバグを回避しています。これらのハックは、CSSバリデータが無効であると文句を言う原因になります。また、いくつかの場所で、まだ完全に標準化されていない最新のCSS機能も使用していますが、これらは純粋に漸進的な機能強化のために使用されています。
これらのバリデーションの警告は、実際には問題になりません。CSSのハック以外の部分は完全に検証され、ハックの部分はハック以外の部分の適切な機能を妨げないためです。したがって、これらの特定の警告を意図的に無視しています。
同様に、HTMLドキュメントにも、特定のFirefoxのバグの回避策を含めるために、些細で取るに足りないHTMLバリデーションの警告がいくつかあります。