デバイスごとにcss・jsを変える

import.jsを作り、その中にcssやjsをまとめて書く。
userAgentを使って振り分ける。

html

  <!--タブレットのときはPCを出す-->
  <script>
	  $(function() {
		var ua = navigator.userAgent;
		if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
			// スマホのとき
			$('head').prepend('<meta name="viewport" content="width=device-width,initial-scale=1">');
		}else{
			// PC・タブレットのとき
       $('head').prepend('<meta name="viewport" content="980px">');
			
		}
	});
  </script>
  <!--タブレットのときはPCを出す-->
  <!--import.js内でjsとcssを一括で読ませる-->
  <script type="text/javascript" src="js/import.js"></script>
  <!--import.js内でjsとcssを一括で読ませる-->

import.js

//jsの処理
	  if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
	 //スマホのjs処理
        document.write('<script type="text/javascript" src="js/phone.js"></script>');
} else {
	//PC,タブレットのjs処理
	document.write('<script type="text/javascript" src="js/pc.js"></script>');
	
}

//cssの処理
      if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
         //スマホのcss処理	
       document.write('<link rel="stylesheet" href="css/phone.css">');

}else {
         //PC,タブレットのcss処理  
	 document.write(' <link type="text/css" rel="stylesheet" href="css/pc.css" >');  
  
    }
  • コーダーのための計算機