wordpress Bootstrap 3 での IE8 対策

CATEGORY: WordPress | TAG:

2013年8月27日

先日このサイトを Bootstrap 3 を使ってリニューアルして、IE のブラウザモードとドキュメントモードを IE8 にして確認したところ、ナビゲーションバーがスモールデバイス用のトグルメニューが表示されてしまっていました。

respond.min.js の読み込み

おそらくメディアクエリを認識していないようで、実機で確認しても同じ状態だったので、調べたところ「respond.min.js」を body 要素の閉じタグの前に記述すると良いとあったので試してみたらうまく行きました。

もし同じ現象が起きていたら試してみると良いかもしれません。

Bootstrap 3 の「Getting started/Basic template」の記述。（head 要素内で「respond.min.js」を 読み込むように書かれています）

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- IE8 対策 ：この部分を body 要素の閉じタグの前に記述する-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--&#91;if lt IE 9&#93;>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <!&#91;endif&#93;-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

変更後

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- ★IE8 対策 ： body 要素の閉じタグの前に記述-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--&#91;if lt IE 9&#93;>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <!&#91;endif&#93;-->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

WordPress の場合は footer.php に記述すると良いと思います。以下は例です。

<div id="footer">
<div class="container text-center">
<small>Copyright &copy; Web Design Leaves. All Rights Reserved.</small>
</div>
</div><!-- end of #footer -->
<!--&#91;if lt IE 9&#93;>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv-printshiv.js" type="text/javascript">
</script>
<script src="<?php echo get_template_directory_uri(); ?>/js/respond.min.js" type="text/javascript">
</script>
<!&#91;endif&#93;-->
<script src="<?php echo get_template_directory_uri(); ?>/bs/js/bootstrap.min.js"></script> 
</body>
</html>

WordPress に関しては「Bootstrap 3 を WordPress で使ってみる」も参照ください。