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

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

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の場合
}

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

javascript
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました