GitHubで表示

ブラウザとデバイス

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

サポート対象ブラウザ

Bootstrapは、すべての主要なブラウザとプラットフォームの最新の安定版リリースをサポートしています。Windowsでは、Internet Explorer 10-11 / Microsoft Edgeをサポートしています。

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

サポートされているブラウザとそのバージョンは、.browserslistrcファイルで確認できます。

# 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

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

モバイルデバイス

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

	Chrome	Firefox	Safari	Android Browser & WebView	Microsoft Edge
Android	サポート対象	サポート対象	該当なし	Android v5.0+ がサポート対象	サポート対象
iOS	サポート対象	サポート対象	サポート対象	該当なし	サポート対象
Windows 10 Mobile	該当なし	該当なし	該当なし	該当なし	サポート対象

デスクトップブラウザ

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

	Chrome	Firefox	Internet Explorer	Microsoft Edge	Opera	Safari
Mac	サポート対象	サポート対象	該当なし	サポート対象	サポート対象	サポート対象
Windows	サポート対象	サポート対象	サポート対象、IE10+	サポート対象	サポート対象	サポート対象外

Firefoxの場合、最新の通常の安定版リリースに加えて、最新の拡張サポートリリース (ESR)バージョンのFirefoxもサポートしています。

非公式には、BootstrapはChromiumおよびLinux用Chrome、Linux用Firefox、およびInternet Explorer 9でも十分に見栄え良く動作するはずですが、これらは正式にはサポートされていません。

Bootstrapが対処する必要のあるブラウザのバグのリストについては、ブラウザのバグの壁を参照してください。

Internet Explorer

Internet Explorer 10以上がサポートされています。IE9以下はサポートされていません。一部のCSS3プロパティとHTML5要素は、IE10では完全にサポートされていないか、完全な機能を実行するためにプレフィックス付きのプロパティが必要であることに注意してください。CSS3およびHTML5機能のブラウザサポートの詳細については、Can I use…を参照してください。IE8-9のサポートが必要な場合は、Bootstrap 3を使用してください。

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

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

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

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

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

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

ブラウザのズーム

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

iOSでのスティッキーな`:hover`/`:focus`

ほとんどのタッチデバイスでは:hoverは不可能ですが、iOSはこの動作をエミュレートしており、1つの要素をタップした後も残る「スティッキー」なホバースタイルが発生します。これらのホバースタイルは、ユーザーが別の要素をタップした場合にのみ削除されます。この動作は、ほとんどの場合望ましくないと見なされ、AndroidまたはWindowsデバイスでは問題ないようです。

v4アルファ版およびベータ版のリリースを通して、ホバーをエミュレートするタッチデバイスブラウザでホバースタイルを無効にするメディアクエリシムを選択するための不完全でコメントアウトされたコードを含めました。この作業は完全に完了または有効化されることはありませんでしたが、完全な破損を避けるために、このシムを非推奨にし、疑似クラスのショートカットとしてmixinを保持することにしました。

印刷

一部の最新ブラウザでも、印刷は癖がある場合があります。

Safari v8.0の時点では、固定幅の.containerクラスを使用すると、印刷時にSafariが異常に小さなフォントサイズを使用する可能性があります。詳細については、issue #14868およびWebKitバグ #138192を参照してください。1つの潜在的な回避策は、次のCSSです。

@media print {
  .container {
    width: auto;
  }
}

Androidの標準ブラウザ

箱から出してすぐの状態では、Android 4.1（および一部の新しいリリースでも明らかに）は、デフォルトのWebブラウザとして（Chromeではなく）Browserアプリを出荷しています。残念ながら、Browserアプリには、一般的にCSSに多くのバグと矛盾があります。

<select>要素では、border-radiusおよび/またはborderが適用されている場合、Android標準ブラウザはサイドコントロールを表示しません。（詳細については、このStackOverflowの質問を参照してください。）下のコードスニペットを使用して、問題のあるCSSを削除し、Android標準ブラウザで<select>をスタイルなしの要素としてレンダリングします。ユーザーエージェントの嗅ぎ分けにより、Chrome、Safari、Mozillaブラウザとの干渉が回避されます。

<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検証警告があります。