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

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

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

サポート対応ブラウザ(Supported browsers)v5.0.0変更

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

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

【変更履歴】
  • 【v5.0.0-alpha1】
    • Chrome:v45以上 ⇒ v60以上
    • Firefox:v38以上 ⇒ v60以上
    • Edge:v12以上 ⇒ v16.16299以上
    • Internet Explorer:v10以上 ⇒ サポート外に
    • iOS:v9以上 ⇒ v10以上
    • Safari:v9以上 ⇒ v10以上
    • Android:v4.4以上 ⇒ v6以上
  • 【v5.0.0-alpha2】
    • Edge:v16.16299以上 ⇒ v16以上
  • 【v5.0.0-alpha3】
    • Microsoft Edge Legacyのサポートを終了(Chromium版のみサポート)
  • 【v5.0.0-beta3】
    • Legacy Edgeの表記を削除
    • iOS:v10以上 ⇒ v12以上
    • Safari:v10以上 ⇒ v12以上
    • Android:v6以上 ⇒ 削除

モバイルデバイス(Mobile devices)v5.0.0-alpha1一部変更

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

  Chrome Firefox Safari Android Browser & WebView
Android サポート対応 サポート対応 Android v6.0以上
サポート対応
iOS サポート対応 サポート対応 サポート対応
【変更履歴】
  • 【v5.0.0-alpha1】
    • Android:v5以上 ⇒ v6以上

デスクトップブラウザ(Desktop browsers)v5.0.0-alpha1一部変更

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

  Chrome Firefox Microsoft Edge Opera Safari
Mac サポート対応 サポート対応 サポート対応 サポート対応 サポート対応
Windows サポート対応 サポート対応 サポート対応 サポート対応

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

非公式には、Bootstrapは、Chromium、Linux版Chrome、Linux版Firefoxでも十分に表示や動作をするはずだが、正式にはサポートしていない。

【変更履歴】
  • 【v5.0.0-alpha1】
    • Internet Explorerをサポート外に
    • 公式サイトの"Wall of browser bugs"(ブラウザのバグのリストなど)ページは廃止

 

Internet Explorer v5.0.0-alpha1変更

Internet Explorerはサポートしていない。Internet Explorerのサポートが必要な場合は、Bootstrap 4を使用すること。

 

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

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

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

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

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

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

 

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

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

 

検証機能(Validators)

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

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

同様に、特定のFirefoxのバグの回避策が組み込まれているため、Bootstrapの解説のHTMLには、些細で重要でないHTML検証警告がいくつかある。

【変更履歴】
  • 【v5.0.0-alpha1】
    • 「iOSでの焦点」「印刷での注意点」「Androidの標準ブラウザ」の各項目は削除