IE8 で Twitter Bootstrap 3 のモバイル バージョンがデスクトップに表示されるのはなぜですか? それを修正するにはどうすればよいですか?

Twitter Bootstrap 3 を使用した IE8

この Web ページでは、IE8 ブラウザーで Twitter Bootstrap 3 を使用する場合の問題を検討します。

IE8 の問題説明

問題のユーザーが Web サイトで Twitter Bootstrap 3 を使用しているときに問題が発生しました。 Web サイトは他のすべての必要なブラウザーでは適切に機能しましたが、IE8 ではモバイル バージョンの Bootstrap の要素がデスクトップの全画面に広がって表示されました。

ユーザーは、IE8 が Twitter でモバイル ファースト デザインを支持していることを問題だと認識しました。ブートストラップ。さらに、最大幅の CSS プロパティが意図したとおりにコンテナ クラスによって取り込まれていませんでした。

解決策

この問題を解決するには、次のようにします。ユーザーは、IE8 でメディア クエリのサポートを有効にする Reply.js ライブラリを利用する必要があります。これは、ブートストラップが正しく機能するにはメディア クエリ サポートが必要であるためです。

ソリューションを実装する手順

1. 次の行をHTML の head セクションdocument:

<!--[if lt IE 9]>
  <script src="path/to/respond.min.js"></script>
<![endif]-->

2. 「path/to/respond.min.js」を、respond.min.js ライブラリへの実際のパスに置き換えます。
3. または、 IE8 をターゲットにするためにヘッド セクションに次の CSS を含めます。以下:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .container {
    max-width: none;
  }
}

4. さらに、response.js はローカル ファイルに対してのみ機能するため、CDN からリンクする代わりに、bootstrap.css ファイルのローカル コピーを使用できます。

追加情報

• 詳細については、https://getbootstrap.com/getting-started/#support を参照してください。具体的には、respond.js を使用した IE8 サポートに関するセクションです。
• respond.js の詳細については、https://github.com/scottjehl/Respond を参照してください。ライブラリ。

以上がIE8 で Twitter Bootstrap 3 のモバイル バージョンがデスクトップに表示されるのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。