ユーザーエージェントを使って端末によって読み込むファイルを変える

端末によって読み込むファイルや別々に処理を行い場合があると思います。

cssの場合だとメディアクエリーを使用してデバイスの幅によって読み込むファイルを変えて見た目を変えるという方法があります。

jsを使う場合だと幅に関係なくスマホなのか？

タブレットなのか？

PCなのかによって読み込むファイルを変えたり別々の処理をすることができます。

jsの場合だとユーザーエージェントを使います。

ユーザーエージェントとは

ユーザーエージェントとは、サイトに訪れたときにユーザー情報のことです。

その情報とは、閲覧しているスマートフォンの機種やOS、そしてブラウザなどです。

そういった情報を活用することでjsを使い別々に処理をかけることができるようになります。

js

var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0 || window.innerWidth <= 750) {
	//スマホの場合(cssとjsの記述例)
          document.write('<link rel="stylesheet" type="text/css" href="style.css">');
          document.write('<script src="js.js"><\/' + 'script>');

}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
	//iPad&Androidタブレットの場合
}else{
	//PCの場合
}

ユーザーエージェントはレスポンシブ対応にはよく使われるスタイルの出し分け方法になります。