ブラウザーとデバイス
最新のものから古いものまで、Bootstrap でサポートされているブラウザーとデバイスについて、それぞれの既知の癖やバグを含めて学びます。
対応ブラウザ
Bootstrap は、すべての主要なブラウザーとプラットフォームの最新の安定したリリースをサポートしています。Windows では、Internet Explorer 10-11 / Microsoft Edge をサポートしています。
WebKit、Blink、または Gecko の最新バージョンを使用する代替ブラウザーは、直接またはプラットフォームの Web ビュー API を介して、明示的にサポートされていません。ただし、Bootstrap は (ほとんどの場合) これらのブラウザーでも正しく表示および機能するはずです。より具体的なサポート情報を以下に示します。
サポートされているブラウザの範囲とそのバージョンは、.browserslistrc file次の URL で確認できます。
# 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 プレフィックスを介して目的のブラウザー サポートを処理します。CSS プレフィックスは、Browserslistを使用してこれらのブラウザー バージョンを管理します。これらのツールをプロジェクトに統合する方法については、ドキュメントを参照してください。
モバイルデバイス
一般的に言えば、Bootstrap は各主要プラットフォームのデフォルト ブラウザの最新バージョンをサポートしています。プロキシ ブラウザ (Opera Mini、Opera Mobile の Turbo モード、UC Browser Mini、Amazon Silk など) はサポートされていないことに注意してください。
| クロム | ファイアフォックス | サファリ | Android ブラウザと WebView | マイクロソフトエッジ | |
|---|---|---|---|---|---|
| アンドロイド | 対応 | 対応 | なし | Android v5.0+ 対応 | 対応 |
| iOS | 対応 | 対応 | 対応 | なし | 対応 |
| Windows 10 モバイル | なし | なし | なし | なし | 対応 |
デスクトップ ブラウザ
同様に、ほとんどのデスクトップ ブラウザの最新バージョンがサポートされています。
| クロム | ファイアフォックス | インターネットエクスプローラ | マイクロソフトエッジ | オペラ | サファリ | |
|---|---|---|---|---|---|---|
| マック | 対応 | 対応 | なし | 対応 | 対応 | 対応 |
| ウィンドウズ | 対応 | 対応 | 対応、IE10+ | 対応 | 対応 | サポートされていません |
Firefox については、最新の通常の安定版リリースに加えて、Firefox の最新のExtended Support Release (ESR)バージョンもサポートしています。
非公式には、Bootstrap は Linux 用の Chromium と Chrome、Linux 用の Firefox、および Internet Explorer 9 で適切に表示され、適切に動作するはずですが、これらは公式にはサポートされていません。
Bootstrap が対処しなければならないブラウザーのバグのリストについては、Wall of browser bugs を参照してください。
インターネットエクスプローラ
Internet Explorer 10 以降がサポートされています。IE9以下ではありません。一部の CSS3 プロパティと HTML5 要素は IE10 で完全にサポートされていないか、完全に機能させるにはプレフィックス付きのプロパティが必要であることに注意してください。CSS3および HTML5 機能のブラウザー サポートの詳細については、Can I use…を参照してください。IE8-9 のサポートが必要な場合は、Bootstrap 3 を使用してください。
モバイルのモーダルとドロップダウン
オーバーフローとスクロール
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 の残りの部分の両方で、一部のコンポーネントでレンダリング アーティファクトを必然的に提示します。問題によっては、修正できる場合があります (最初に検索してから、必要に応じて問題を開きます)。ただし、ハッキーな回避策以外に直接的な解決策がないことが多いため、これらを無視する傾向があります。
スティッキー:hover/ :focusiOS
ほとんど:hoverのタッチ デバイスでは不可能ですが、iOS はこの動作をエミュレートするため、1 つの要素をタップした後も持続する「粘着性のある」ホバー スタイルが得られます。これらのホバー スタイルは、ユーザーが別の要素をタップしたときにのみ削除されます。この動作はほとんど望ましくないと考えられており、Android または Windows デバイスでは問題にならないようです。
v4 のアルファ版とベータ版のリリースを通じて、ホバリングをエミュレートするタッチ デバイス ブラウザでホバー スタイルを無効にするメディア クエリ shim をオプトインするための不完全でコメント アウトされたコードが含まれていました。この作業は完全に完了したり有効になったりすることはありませんでしたが、完全な破損を避けるために、この shimを非推奨にし、ミックスインを疑似クラスのショートカットとして保持することにしました。
印刷
一部の最新のブラウザーでも、印刷が風変わりな場合があります。
Safari v8.0 の時点で、固定幅.containerクラスを使用すると、印刷時に Safari が異常に小さいフォント サイズを使用する可能性があります。詳細については、問題 #14868とWebKit バグ #138192を参照してください。考えられる回避策の 1 つは、次の CSS です。
@media print {
.container {
width: auto;
}
}
Android ストック ブラウザ
Android 4.1 (および一部の新しいリリースのようです) には、既定の Web ブラウザー (Chrome ではなく) としてブラウザー アプリが付属しています。残念ながら、ブラウザー アプリには多くのバグがあり、一般的に CSS との矛盾があります。
メニューを選択
要素では、 and/orが適用され<select>ている場合、Android ストック ブラウザはサイド コントロールを表示しません。(詳細については、この StackOverflow の質問を参照してください。) 以下のコード スニペットを使用して、問題のある CSS を削除し、Android ストック ブラウザーでスタイル設定されていない要素としてレンダリングします。ユーザー エージェント スニッフィングは、Chrome、Safari、および Mozilla ブラウザーとの干渉を回避します。border-radiusborder<select>
<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 ドキュメントにも、特定の Firefox のバグに対する回避策が含まれているため、些細で取るに足らない HTML 検証警告がいくつかあります。