2015年6月5日金曜日

[JS]UserAgentで読ませるCSSを切換える

LPのコーディング仕事で、レスポンシブのデザインじゃないものを渡されたときに使ったもの。特に「タブレットもCSSを別に」となると、意外と見つからなくて往生したのですよ。パソコン、タブレット、スマホで切換えてくれます。iPadとPCが同じ物でもOKだったら、同じCSSを読ませるか、else ifの2行をカットすればよろし。しばらくMTとかWPの実装ばかりしていたから、else ifとelseifの違いに気が付きませんでした(w

<script type="text/javascript">
 (function(){
   var ua = {
  iPhone: navigator.userAgent.indexOf('iPhone') != -1,
  iPad: navigator.userAgent.indexOf('iPad') != -1,
  iPod: navigator.userAgent.indexOf('iPod') != -1,
  android: navigator.userAgent.indexOf('Android') != -1,
  windows: navigator.userAgent.indexOf('Windows Phone') != -1
   }
   if(ua.iPhone || ua.iPod || ua.android || ua.windows){
  document.write('<link rel="stylesheet" type="text/css" href="sp.css" media="screen">\n');
   }else if(ua.iPad){
  document.write('<link rel="stylesheet" type="text/css" href="tb.css" media="screen">\n');
   }else{
  document.write('<link rel="stylesheet" type="text/css" href="pc.css" media="all">\n');
   }
 }());
</script>

0 件のコメント:

コメントを投稿