サポートされるブラウザと端末

http://getbootstrap.com/getting-started/#support

Bootstrapは最新のデスクトップ・モバイルブラウザに対して、最適に動作されるように構築されています。これは古いブラウザで特定のコンポーネントのレンダリングが完全に機能するものの、異なるスタイルで表示されるかもしれないことを意味します。

サポートされるブラウザ
IE8と9
IE8とRespond.js
IE8とbox-sizing
IE8と@font-face
IE互換性モード
Windows8のIE10とWindows Phone 8
Safariの小数パーセントの丸めについて
モーダルウインドウ、ナビゲーションバー、仮想キーボード
ブラウザのズームについて
モバイルで上のやっかいな:hoverと:focusの挙動
印刷
AndroidのBrowserアプリ
バリデーションについて

サポートされるブラウザ

とりわけ、我々は下記のブラウザとプラットフォームの最新バージョンをサポートします。 Windowsでは、IE8-11をサポートします。サポート状況のより詳しい情報を下記に示します。

	Chrome	Firefox	IE	Opera	Safari
Android	Supported	Supported	N/A	Not Supported	N/A
iOS	Supported	N/A		Not Supported	Supported
Mac OS X	Supported	Supported		Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not Supported

公式にサポートしてはいないものの、BootstrapはChromium、LinuxのChrome・Firefox、IE7でも十分に動作するはずです。

下記は、Bootstrapが対処するために取り組んだブラウザ固有の幾つかのバグのリストになります。 Wall of browser bugsを参照してください。

IE8と9

IE8と9もサポートしていますが、これらのブラウザではCSS3のプロパティとHTML5の要素が完全にサポートされないことに注意してください。加えて、IE8はメディアクエリーを有効にするためのRespond.jsを必要とします。

Feature	Internet Explorer 8	Internet Explorer 9
`border-radius`	Not supported	Supported
`box-shadow`	Not supported	Supported
`transform`	Not supported	Supported, with `-ms` prefix
`transition`	Not supported
`placeholder`	Not supported

Can I use...を訪れて、 CSS3とHTML5の機能の詳細なブラウザサポート状況を確認してください。

IE8とRespond.js

IE8対策のためににRespond.jsを開発環境と本番(production)環境で使用する際は、下記のことに注意してください。

Respond.jsとクロスドメインCSS

CSSでのRespond.jsの使用において、異なるドメイン(サブドメイン)から提供される場合(例えばCDN上から)は、幾つかの追加のセットアップが必要になります。詳細はRespond.jsのドキュメントを参照してください。

Respond.jsと`file://`

ブラウザのセキュリティ規則により、Respond.jsはfile://プロトコルを通して表示されたページでは動作しません。 (ローカルのHTMLファイルを開いたような場合) IE8でレスポンシブの機能をテストするには、HTTP(S)越しにページを表示してください。詳細については、Respond.jsのドキュメントを確認してください。

Respond.jsと`@import`

@importを通して参照されるCSSに対して、Respond.jsは動作しません。特にDrupalの幾つかの設定において、@importが使用されていることが知られています。詳細については、Respond.jsを参照してください。

IE8とbox-sizing

IE8は、min-width、max-width、min-height、max-heightと連結する際に、 box-sizing: border-box;を完全にはサポートしません。そのため、v3.0.1からは.containersでmax-widthを使用しなくなりました。

IE8と@font-face

IE8は:beforeと一緒に@font-faceを使用するケースで幾つかの問題を抱えています。 BootstrapではGlyphiconsに対してこれを利用しています。もし、ページがキャッシュされていて、そのウインドウ内にマウスオーバーすること無しに読み込まれた場合(更新ボタンの押下、またはiframe内の何かの読み込み等)、そのフォントが読み込まれる前にページがレンダリングされてしまいます。

ページ(body)上にホバーすることで幾つかのアイコンが表示され、残りのアイコンにホバーすることで同様にそれらが表示されます。(翻訳に自信なし) 詳細はIssue #13863を参照してください。

IE互換性モード

Bootstrapは古いバージョンのIEの互換性モードでサポートされません。 IEの最新のレンダリングモードの使用を確実にするために、ページ内に適切な<meta>タグを含めることを検討してください。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

デバッグツールを開いて、ドキュメントモードを確かめてください。 (F12キーを押して、"ドキュメントモード"を調べます。)

サポートされる各IEのバージョンで可能なかぎり良い状態でレンダリングされるように、このタグは全てのBootstrapのドキュメントとサンプルに含まれています。

より詳しい情報については、このStackOverflowの質問を参照してください。

Windows8のIE10とWindows Phone 8

IE10はviewportの幅(width)から端末の幅(width)を識別しないため、 BootstrapのCSSにおいて適切なメディアクエリーを適用しません。通常は、これに対処するためのCSSのスニペットを追加することになるでしょう。

@-ms-viewport       { width: device-width; }

ただし、これはWindows Phone 8のUpdate 3(GDR3)より古いバージョンのデバイスでは動作しないため、そのような端末では幅の狭い"携帯電話"用のビューの代わりに、デスクトップ用のビューが表示されてしまいます。これに対処するために、このバグを回避する下記のCSSとJavaScriptを含める必要があります。

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile/10.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

より詳しい情報と使用についてのガイドラインを読みたければ、 Windows Phone 8 and Device-Widthを参照してください。

問題が起きないように、我々はBootstrapの全てのドキュメントとデモ用のサンプルにこれを含めています。

Safariの小数パーセントの丸めについて

OS X用のv7.1より前とiOS用のv8.0より前のバージョンのSafariのレンダリングエンジンは、 .col-*-1のグリッドのクラスで使用される小数の数(数値?)において、幾つかの問題を抱えていました。

そのため、もしあなたが12個のグリッドカラムを配置した場合、他のカラムの行と比べて短くなることに気づくでしょう。 Safari/iOSをアップグレードする他に、下記に幾つかの回避策を示しておきます。

.pull-rightを最後のグリッドカラムに追加することで、強制的に右に寄せます。
Safariのための完璧な小数の丸めを行うために、手動でパーセントの指定を行います。(1つ目より難しい方法です。)

モーダルウインドウ、ナビゲーションバー、仮想キーボード

overflowとスクロール

iOSとAndroidでは、<body>要素でのoverflow: hiddenのサポートはかなり制限されます。そのため、これら端末ブラウザでのモーダルダイアログの最上部または最下部でスクロールをすると、 <body>のコンテンツがスクロールします。

仮想キーボード

また、あなたがfixされたnavbar、またはモーダルダイアログ内でinputを使用している場合は、 iOSのレンダリングのバグで、仮想キーボードに切り替わる時にfixされた要素位置が更新されない現象に注意してください。この問題の回避策として、要素のposition: absoluteへの変換、またはフォーカスをきっかけに手動で正しい位置に配置する方法があります。これはBootstrapでは扱われないため、あなたのアプリケーションに最適な解決方法を選ぶようにしてください。

ナビゲーションバーのドロップダウン

ナビゲーション(nav)内の.dropdown-backdrop要素は、z-indexの複雑さのため、iOSでは使用されません。そのため、ナビゲーションバーでドロップダウンを閉じるには、直接ドロップダウン要素をクリックしなければいけません。 (または、iOSのクリックイベントが発火する他の要素をクリック)

ブラウザのズームについて

ページのズームはBootstrapとそれ以外のWeb(フレームワークやライブラリ?)の両方のコンポーネントにとって、必然的に不自然な描画をもたらすことになりがちです。

この問題に対して我々は修正することが可能かもしれません。(もし必要であれば、まずissueで検索し、必要であればissueを作成してください)(翻訳に自信なし) ただし、ハック的な回避策の他に直接的な解決方法が見当たらないため、我々はこれらを無視する傾向にあります。

モバイルで上のやっかいな:hoverと:focusの挙動

たとえ、ほとんどのタッチスクリーン上で実際のhoverが出来ないとしても、多くのモバイルブラウザはhoverのエミュレートをサポートし、"やっかい(sticky)"な:hoverを行います。具体的には、:hoverスタイルは要素をタップした後に適用が開始され、ユーザーが別の要素をタップした後に適用を停止します。これはそのようなブラウザで、Bootstrapの:hoverが"解除できない(stuck)"状態になってしまう可能性があります。幾つかのモバイルブラウザでは、:focusも同様のやっかいな挙動をします。そのようなスタイルを全体的に取り除く以外に、現在これらの問題に対するシンプルな回避策が存在しません。

印刷

最新のブラウザにおいても、ブラウザによる印刷は奇妙な挙動をすることがあります。

特にChromeのv32では、マージン設定に関係なく、ウェブページの印刷時にメディアクエリーを解決する際に、Chromeは物理的な紙のサイズに比べて著しく幅の狭いviewportの幅を使用します。このため、印刷時にBootstrapのextra-small(xs)のグリッドが、予期せずに有効化されてしまうことがあります。詳細については、#12078を参照してください。下記にこの問題の回避策を記しておきます。

extra-small(xs)のグリッドをサポートして、ページでそれが受け入れられるようにしてください。
印刷用の紙がextra-small(xs)よりも大きいと考慮されるように、 Lessの@screen-*変数の値をカスタマイズしてください。
印刷メディア専用にグリッドサイズの区切り(ブレイクポイント)が変更される特別なメディアクエリーを追加してください。

またSafariのv8.0でも、fixされた幅の.containerが、印刷時に通常とは異なる小さいフォントサイズを、Safariに使用させるという現象を発生させることがあります。より詳しい情報については、#14868を参照してください。これを修正出来る可能性のある回避策のひとつが、下記のCSSを追加することです。

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

AndroidのBrowserアプリ

Android 4.1(と、以降の新しいリリースの幾つか)では、デフォルトで使用されるウェブブラウザとして、 Browserアプリ(Chromeではなく)が選ばれています。不幸なことに、このBrowserアプリは多くのバグと、一般的なCSSとは矛盾する挙動を持ちます。

Select menus

<select>要素に対して、AndroidのBrowserアプリは、 border-radius、borderを適用していた場合に、そこに表示されるはずのコントロール(ドロップダウンの矢印等)表示を行いません。 (詳細については、StackOverflowの質問を参照してください。) 問題を引き起こすCSSを削除する下記のコードスニペットを使用して、 AndroidのBrowserアプリではスタイル無しの要素として、<select>を描画するようにしてください。 userAgentの識別により、Charome、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のnon-hackyな部分が十分に正当なものであり、 hackyな部分についてもnon-hackyな部分の正式な機能に干渉することも無いため、実際にはこれらのバリデーションの警告を気にする必要はありません。そのため、我々はこれらの特定の警告について故意に無視しています。

我々のHTMLドキュメントもFirefoxのバグを回避するコードを含むことが原因で、同様に取るに足らない重要ではないHTMLバリデーションの警告を受けます。

docs CC BY 3.0

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。