メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

ブラウザとデバイス(Browsers and devices)

Bootstrapでサポートされているブラウザやデバイスについて、古いものから最新のものまでそれぞれの既知の癖やバグなどを学習する。

サポート対応ブラウザ(Supported browsers)v4.1.3設定変更

Bootstrapでは、主要なブラウザとプラットフォームの最新の安定リリース版をサポート。Windowsでは、Internet Explorer10-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

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

【変更履歴】

  • 【v4.1.3】npmプロジェクト間で意図しない継承されたブラウザ設定を避けるため、package.json のbrowserslist設定を .browserslistrc に移動

モバイルデバイス(Mobile devices)

一般的にBootstrapは各主要プラットフォームの標準ブラウザの最新バージョンをサポート対応済。プロキシブラウザ(Opera Mini、Opera Mobileのターボモード、UC Browser Mini、Amazon Silkなど)はサポート対応していない。

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

デスクトップブラウザ(Desktop browsers)

同様に、ほとんどのデスクトップブラウザの最新バージョンがサポート対応済。

  Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac サポート対応 サポート対応 該当なし 該当なし サポート対応 サポート対応
Windows サポート対応 サポート対応 IE10以上 サポート対応 サポート対応 サポート対応 サポート非対応

Firefoxの場合、最新の通常安定版に加えて、Firefoxの延長サポート版(ESR)のバージョンもサポートしている。

Bootstrapは、Chromium、Linux版Chrome、Linux版Firefox、Internet Explorer9を正式にはサポートしないが、非公式にはこれらでも十分に表示され動作するはず。

Bootstrapが取り組まなければならないいくつかのブラウザのバグのリストについては、Bootstrap公式のWall of browser bugsに記載。

 

Internet Explorer

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

 

モバイルでのモーダル、ドロップダウン(Modals and dropdowns on mobile)

オーバーフローとスクロール(Overflow and scrolling)

<body> 要素での overflow: hidden; のサポートは、iOSとAndroidではかなり制限される。そのため、これらのいずれかのデバイスのブラウザではモーダルの上部または下部を過ぎてスクロールしたときに、表示されないはずの <body> のコンテンツがスクロールを開始してしまう。Chrome bug #175502(Chrome v40で修正済み)や WebKit bug #153852に記載。

iOSのテキストフィールドとスクロール(iOS text fields and scrolling)

iOS9.2では、モーダルを開いている間にスクロールジェスチャーの最初のタッチが、テキストの <input><textarea> の境界内にある場合は、モーダルの代わりに <body> のコンテンツ自体がスクロールされる。WebKit bug #153856に記載。

.dropdown-backdrop 要素(メニューの外側をクリックするとドロップメニューを閉じる機能)は、z-index作成の複雑さのためにiOSの上のナビゲーションでは使用できない。従って、ナビゲーションバーでドロップダウンを閉じるには、ドロップダウン要素(またはiOSのクリックイベントを発動させる他の要素)を直接クリックする必要がある。

 

ブラウザのズーム(Browser zooming)

ページズームは、必然的にBootstrapや他のインターネットの両方で一部のコンポーネントでは人為的なレンダリング表示をする。問題によっては、最初に検索してから問題を開いて修正する場合もあるが、大抵はハックの回避策以外には直接的な解決策がないことが多いので、これらを無視する傾向がある。

 

iOSでの焦点(Sticky :hover/:focus on iOS)

ほとんどのタッチデバイスでは、:hover は使用不可だが、iOSはこの動作をエミュレートする。その結果、1つの要素をタップした後も"sticky"なホバースタイルが維持される。これらのホバースタイルは、ユーザーが別の要素をタップするときにのみ削除される。この動作は主に望ましくないと考えられており、AndroidやWindowsのデバイスでは問題にはならない模様。

Bootstrap4のアルファ版とベータ版のリリースでは、ホバーをエミュレートするタッチデバイスブラウザのホバースタイルを無効にするメディアクエリshimを選択するための不完全でコメントアウトされたコードが組み込まれていた。この作業は完全には完了していないが、完全な破損を避けるため、このshimを廃止し、mixinを疑似クラスのショートカットとして保持した。

 

印刷での注意点(Printing)

モダンブラウザでさえ、印刷上の欠陥がある。

Safari v8.0では、固定幅の .container で印刷時にSafariのフォントサイズが異常に小さくなることがある。詳細は問題#14868WebKitバグ#138192に記載。このための可能性のある回避策の一つとして、次のCSSを追加:

設定例
@media print {
	.container {
		width: auto;
	}
}

 

Androidの標準ブラウザ(Android stock browser)

Android 4.1以降では、標準のWebブラウザとしてChromeではなく"ブラウザ"アプリが提供されているが、残念なことに"ブラウザ"アプリには大概のCSSでバグや不整合がたくさん存在する。

選択メニュー(Select menu)

<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のデモをチェックすること。

 

検証機能(Validators)

古いものやバグの多いブラウザで最善の体験を提供するために、Bootstrapはいくつかの場所でCSSブラウザのハックを使用して、特別なCSSを特定のバージョンのブラウザに設定しブラウザ自体のバグを回避している。これらのハックは当然のことながら、CSS検証ツールにそれらが無効であると訴える。いくつかの場所ではまた標準化されていない最先端CSSの機能を使用しているが、これらは純粋に進歩的な拡張のために使用されている。

これらの検証警告は、CSSの非ハック部分を完全に検証しないと、ハックされた部分が意図的にこれらの特定の警告を無視し、非ハック部分の適切な機能を妨害しないので実際には問題にならない。

BootstrapのHTMLドキュメントには、同様に起因する特定のFirefoxのバグの回避策が組み込まれているため、いくつかの些細で取るに足らないHTMLの検証警告もある。