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

Question

画面サイズ幅によって、読み込むファイルを入れ替える設定し、
外部JSによって、bodyのタグを元にhtmlが呼び出される動きをするのですが、
下記の方法で試しましたが、htmlが表示されませんでした。


画面サイズ幅毎に、読み込むファイルを変更する方法をご存知でしたら、
ご教示のほど、よろしくお願いします。






	
		$(function () {
		   //PCのとき
		   if (window.matchMedia('(min-width: 641px)').matches) {
		      //切り替える画面サイズ
		        document.getElementById("innerhtml").innerHTML = '
		        
				
				
				
				';
		     //スマホのとき
		  } else {
		     	document.getElementById("innerhtml").innerHTML = '
		     	
				
				
				
				';
		     }
		    ;
		});
	



//画面が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;
  }
}










  header_func_sp();





  header_func(); 







  footer_func_sp(); 





  footer_func();





▼実際の表示▼
https://www.4860.jp/original-order/hatakeyama/hat-ord-kfm-spo/test-order.php

Answer

ECマスターズの田中です。

JavaScriptにて、'と'で囲む文字列の中に改行を入れますと、
文法が崩れてしまい、表示崩れの原因となってしまいます。

文字列の中で改行しても問題が起こらないよう、
document.getElementById("innerhtml").innerHTML = '（中略）';
の、2箇所の'を`にご変更いただき、
document.getElementById("innerhtml").innerHTML = `（中略）`;
のようにご変更いただいた上で、ページの表示をご確認いただきますようお願いします。

Answer

ECマスターズ 田中様。

お世話になります。

早速、ページの修正を行いましたが、表示がかわらないです。
記述方法があっているか、確認お願いします。

https://www.4860.jp/original-order/hatakeyama/hat-ord-kfm-spo/test-order.php

	
		$(function () {
		   //PCのとき
		   if (window.matchMedia('(min-width: 641px)').matches) {
		      //切り替える画面サイズ
		        document.getElementById("innerhtml").innerHTML= `



`;
		     //スマホのとき
		  } else {
		     	document.getElementById("innerhtml").innerHTML= `



`;
		     }
		    ;
		});

Answer

ECマスターズの田中です。

失礼しました、文法を問わず、
JavaScriptの文字列の中にが含まれていると、
それを終了タグとして認識してしまうことがわかりました。

お手数ですが、を直接ソースの中に記載しないために、ソース内すべての

を

のように、タグの中に`+`を入れる形で修正していただきますようお願いします。

Answer

ECマスターズ 田中様。

お世話になります。

早速、修正致しました。
https://www.4860.jp/original-order/hatakeyama/hat-ord-kfm-spo/test-order.php

ページ上のスクリプトの構文の表示は消えましたが、
javascriptが画面毎に切り替わってるのかが、わかりませんでした。

デベロッパーツールで動作を確認した所、エラーが出てました。
下記のソースが該当してました。

JSを読み込んだあとに、表示されるのですが、
JSファイルの表示の切り替えが上手くいってないのでしょうか。




header_func_sp();





header_func();






footer_func_sp();





footer_func();
###HR######IMG0d3e716034e0d876134cfebb54020f1d8.jpegIMG0###

Answer

ECマスターズの田中です。

修正いただいた内容を確認の上、
私でもいろいろと試行錯誤してみたのですが、
ページの読込と共に外部JSファイル（js.php、base.js、call_html.jsなど）を読み込む処理が
どうしても実現できませんでした。

PHPをご利用とのことですので、
画面サイズではなく、デバイスの種類による判定でよろしければ、
PHPの中で判断して、HTMLを出し分けていただくのはいかがでしょうか。
具体的には、下記のようなソースを、test-order.phpにご記載いただく形になります。

= この下の行から ====================


スマートフォン用HTML



PC用HTML


= この上の行まで ====================

スマートフォン用HTML、PC用HTMLは
からまで、HTML全体をご記載ください。

PHPファイルを自由にご設置いただける場合は、
「Mobile Detect」クラスをご利用いただくと便利です。
https://syncer.jp/how-to-use-mobile-detect

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

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