- 文字サイズ変更
- 小
- 中
- 大
解決済
レスポンシブ デバイス毎に 読み込むファイルを変える
- 相談者：非公開
- 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
外部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
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2021/04/05 16:14
- 返信者：非公開（質問者）
- 2021/04/05 18:38
- 返信者：非公開
- 2021/04/05 21:11
- 返信者：非公開（質問者）
- 2021/04/06 11:01
- 返信者：非公開
- 2021/04/06 15:14
このフォーラムへの質問は終了しました
質問を検索する