QA@IT

レスポンシブサイトのiframe内の幅指定による振り分け方

3761 PV

ブラウザの幅で振り分けるタイプのレスポンシブサイトを作成中です。
768px以上は通常のPCサイトとして、基本のbase.cssを読み、
768px以下はスマホサイト用として base-sp.cssを読むとしています。

base-sp.cssは
@media only screen and (max-width:768px){
}
という記述内に記載し、PC表示を上書きする方法です。

(元々あるPCサイトにスマホ用を加える形で作成しています)

index.htmlの中に、test.htmlをiframeで呼び出す箇所があり、
index.html上ではそのiframeは幅300pxとして設置してあります。

このiframe内にはスライドショーが表示されています。
このスライドショーのjsの挙動やcssを、幅768px以上と以下の場合で分けたいのですが、

iframe内に振り分け用のcssやjsへのリンクをつけても、
どうやら幅が正常に認識できていない?ようで、
768px以上でも以下でも、base-sp.cssやスマホ表示用のjsの方が読まれてしまいます…

iframe「内」の表示も、幅にあわせて読み込むjsやcssを切り替えるには、どうしたらよいのでしょうか。

ご助言いただけますと幸いです。

ウォッチ

この質問への回答やコメントをメールでお知らせします。