• 文字サイズ


解決済

レスポンシブ デバイス毎に 読み込むファイルを変える

  • 相談者:非公開
  • 2021/04/05 14:11
画面サイズ幅によって、読み込むファイルを入れ替える設定し、
外部JSによって、bodyのタグを元にhtmlが呼び出される動きをするのですが、
下記の方法で試しましたが、htmlが表示されませんでした。


画面サイズ幅毎に、読み込むファイルを変更する方法をご存知でしたら、
ご教示のほど、よろしくお願いします。



<head>

<div id="innerhtml"></div>
<script>
$(function () {
//PCのとき
if (window.matchMedia('(min-width: 641px)').matches) {
//切り替える画面サイズ
document.getElementById("innerhtml").innerHTML = '
<script type="text/javascript" src="/sp/contents/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/sp/contents/js/call_html.js"></script>
<link href="/sp/contents/css/order-sp.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/sp/contents/css/import.css">
<link rel="stylesheet" type="text/css" href="/sp/contents/css/footer.css">';
//スマホのとき
} else {
document.getElementById("innerhtml").innerHTML = '
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/js.php"></script>
<script type="text/javascript" src="/js/base.js"></script>
<script type="text/javascript" src="/js/call_html.js"></script>';
}
;
});
</script>

<style>

//画面が641px~PC画面を表示
@media screen and (min-width: 641px) {
 
.pc {
display:block;
}
.sp {
display:none;
}
}

//画面が0~640pxまでSP画面を表示
@media screen and (max-width: 640px) {
.pc {
display:none;
}
.sp {
display:block;
}
}

</style>

</head>

<body>

<!-- 読込①スマホの場合 -->
<header id="changeHeader sp"></header>
<script>
header_func_sp();
</script>

<!-- 読込②PCの場合 -->
<div id="changeHeader pc"></div>
<script>
header_func();
</script>



<!-- 読込①スマホの場合 -->
<footer id="changeFooter sp"></footer>
<script>
footer_func_sp();
</script>

<!-- 読込②PCの場合 -->
<div id="changeFooter pc"></div>
<script>
footer_func();
</script>


</body>

▼実際の表示▼
https://www.4860.jp/original-order/hatakeyama/hat-ord-kfm-spo/test-order.php
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
2020年は4月から毎週オンラインにて開催し、1900社が参加された90分で学べる楽天集客対策セミナーですが、アップデートをして2021年も開催いたします。

  • 返信者:非公開
  • 2021/04/05 16:14
ECマスターズの田中です。

JavaScriptにて、'と'で囲む文字列の中に改行を入れますと、
文法が崩れてしまい、表示崩れの原因となってしまいます。………(省略)………
  • 返信者:非公開(質問者)
  • 2021/04/05 18:38
ECマスターズ 田中様。

お世話になります。

早速、ページの修正を行いましたが、表示がかわらないです。
記述方法があっているか、確認お願いします。………(省略)………
  • 返信者:非公開
  • 2021/04/05 21:11
ECマスターズの田中です。

失礼しました、文法を問わず、
JavaScriptの文字列の中に</script>が含まれていると、
それを終了タグとして………(省略)………
  • 返信者:非公開(質問者)
  • 2021/04/06 11:01
ECマスターズ 田中様。

お世話になります。

早速、修正致しました。
https://www.4860.jp/original-order/hat………(省略)………
  • 返信者:非公開
  • 2021/04/06 15:14
ECマスターズの田中です。

修正いただいた内容を確認の上、
私でもいろいろと試行錯誤してみたのですが、
ページの読込と共に外部JSファイル(js.ph………(省略)………