ブラウザとデバイス Browsers and devices
Bootstrapがサポートする最新のものから古いものまでのブラウザとデバイス、および既知の不具合やバグについて学びます。
サポートされるブラウザ
Bootstrapは、すべての主要なブラウザとプラットフォームの最新の安定版リリースをサポートしています。
WebKit、Blink、またはGeckoの最新バージョンを直接使用するか、プラットフォームのWebビュー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
not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533)
CSSプレフィックスを介して意図されたブラウザサポートを処理するためにAutoprefixerを使用しており、これはBrowserslistを使用してこれらのブラウザバージョンを管理します。これらのツールをプロジェクトに統合する方法については、それらのドキュメントを参照してください。
モバイルデバイス
一般的に、Bootstrapは各主要プラットフォームのデフォルトブラウザの最新バージョンをサポートしています。プロキシブラウザ(Opera Mini、Opera MobileのTurboモード、UC Browser Mini、Amazon Silkなど)はサポートされていないことに注意してください。
| Chrome | Firefox | Safari | Android Browser & WebView | |
|---|---|---|---|---|
| Android | サポート | サポート | — | v6.0+ |
| iOS | サポート | サポート | サポート | — |
デスクトップブラウザ
同様に、ほとんどのデスクトップブラウザの最新バージョンがサポートされています。
| Chrome | Firefox | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|
| Mac | サポート | サポート | サポート | サポート | サポート |
| Windows | サポート | サポート | サポート | サポート | — |
Firefoxについては、最新の通常の安定版リリースに加えて、Firefoxの最新のExtended Support Release (ESR)バージョンもサポートしています。
非公式には、Bootstrapは、公式にサポートされていませんが、Linux用のChromiumとChrome、およびLinux用のFirefoxでも十分に見た目と動作が良好であるはずです。
Internet Explorer
Internet Explorerはサポートされていません。Internet Explorerのサポートが必要な場合は、Bootstrap v4を使用してください。
モバイルでのモーダルとドロップダウン
オーバーフローとスクロール
iOSとAndroidでは、<body>要素でのoverflow: hidden;のサポートがかなり制限されています。そのため、これらのデバイスのブラウザでモーダルの上部または下部を超えてスクロールすると、<body>のコンテンツがスクロールを始めます。Chrome bug #175502(Chrome v40で修正)およびWebKit bug #153852を参照してください。
iOSのテキストフィールドとスクロール
iOS 9.2以降、モーダルが開いている間、スクロールジェスチャーの最初のタッチがテキスト<input>または<textarea>の境界内にある場合、モーダル自体ではなく、モーダルの下の<body>コンテンツがスクロールされます。WebKit bug #153856を参照してください。
Navbarドロップダウン
.dropdown-backdrop要素は、z-indexの複雑さのため、iOSのnavでは使用されません。したがって、navbarsのドロップダウンを閉じるには、ドロップダウン要素を直接クリックする必要があります(またはiOSでクリックイベントを発火する他の要素)。
ブラウザのズーム
ページのズームは、Bootstrapおよびウェブの他の部分の両方で、いくつかのコンポーネントにレンダリングアーティファクトを必然的に提示します。問題によっては、修正できる場合があります(最初に検索し、必要に応じて問題を開いてください)。ただし、これらはハッキーな回避策以外に直接的な解決策がないことが多いため、無視する傾向があります。
バリデーター
古いバグのあるブラウザに可能な限り最高のエクスペリエンスを提供するために、Bootstrapはブラウザ自体のバグを回避するために、特定のブラウザバージョンに特別なCSSをターゲットとするいくつかの場所でCSSブラウザハックを使用しています。これらのハックは、当然ながらCSSバリデーターが無効であると文句を言う原因となります。いくつかの場所では、まだ完全に標準化されていない最先端のCSS機能も使用していますが、これらは純粋にプログレッシブエンハンスメントのために使用されています。
CSSの非ハッキー部分は完全に検証され、ハッキー部分は非ハッキー部分の適切な機能を妨げないため、これらの検証警告は実際には問題ではありません。そのため、これらの特定の警告を意図的に無視しています。
HTMLドキュメントも同様に、特定のFirefoxバグの回避策を含めているため、いくつかの些細で重要でないHTML検証警告があります。