2016/04/15

cssでユーザーエージェントを切り替える方法

ユーザーエージェント(User agent)とは、利用者があるプロトコルに基づいてデータを利用する際に用いるソフトウェアまたはハードウェアのこと。特にHTTPを用いてWorld Wide Webにアクセスする、ウェブブラウザなどのソフトウェアのこと。簡単に言うとユーザー【ホームページを見に来た人】のアクセスした端末【PC・ios・androidなど】

切り替え方法

<header>から</header>の中に切り替えるためのscriptを記述。

 

上からiphoneとipodに読み込ませるcss

androidで読み込ませるcss

PCで読み込ませるcss

 

 

<script>
 (function(){
 var _UA = navigator.userAgent;
 if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
 document.write('<link rel="stylesheet" href="iphone.css">');
 }else if(_UA.indexOf('Android') > -1){
 document.write('<link rel="stylesheet" href="android.css">');
 }else{
 document.write('<link rel="stylesheet" href="pc.css">');
 }
 })();
 </script>

 

iphone.css
android.css
pc.css

3種類のcssを用意しアクセスしてきたエージェントで読み込ませるcssを切り替え。