同人イラスト・漫画・同人サークル|infernoayase-インフェルノアヤセ-

ケモノ・獣人の同人漫画を中心に活動してる「ふさもふ」の同人サークルです。

WP-Bootstrap3がIE8でrespond.jsが反映しないためレスポンシブにならずスマホ表示になってしまう不具合の対象方法

WP-Bootstrap3がIE8でちゃんとレスポンシブにならない不具合の解消法。
BootStrap3の公式に書いていますが、html5shiv.jsとrespond.jsを使わないとIE8で悲劇になります。

WP-Bootstrap3は残念なことにそこの読み込み(ヘッダー部分)順番と読み込む具が違ってました。結果ツルシの状態でIE8がxs表示になってファ!!!!ってなります。

Twitter社推奨記述について
http://getbootstrap.com/getting-started/#template
※CDNで読み込みを推奨している模様

IE8 対応 -修正済み- header

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>	
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--ワードプレス側が吐き出すCSSのデーターが先に来ないとrespond.jsが反映しない-->
<!-- wordpress head functions -->
<?php wp_head(); ?>
<!-- end of wordpress head -->

<!--Twitter Bootstrapリファレンス通り-->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--&#91;if lt IE 9&#93;>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!&#91;endif&#93;-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
</head>

IE8 未対応-ツルシの状態-

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>	
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- media-queries.js (fallback) -->
<!--&#91;if lt IE 9&#93;>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>	
<!&#91;endif&#93;-->

<!-- html5.js -->
<!--&#91;if lt IE 9&#93;>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

<!-- wordpress head functions -->
<?php wp_head(); ?>
<!-- end of wordpress head -->

</head>
Bookmark this on FC2 Bookmark
Share on GREE
LINEで送る
Pocket

この記事のトラックバックURL
followMe