パソコン、スマホ（スマートフォン）、タブレットのユーザーエージェント判定

パソコン、スマートフォン、タブレットで使用するOS、ブラウザ、バージョンなどを判定して分岐処理をする記述を書いてみた。Windows,Mac,Android,iPhone,iPadなど自分が必要な範囲で分岐。

100

101

102

103

104

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSハックを使用しないOSとバージョンの判定</title>
<!--&#91;if lt IE 7&#93;><html class="nojs ie ie6" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;><html class="nojs ie ie7" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;><html class="nojs ie ie8" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if IE 9&#93;><html class="nojs ie ie9" lang="ja"><!&#91;endif&#93;-->
<!--&#91;if (gt IE 9)|!(IE)&#93;><!----><html class="nojs" lang="ja"><!--&#91;endif&#93;-->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
  var ua = navigator.userAgent.toLowerCase();
  var isWindows = /windows/.test(ua);
  var isMac = /mac/.test(ua);
  var isIPhone = /i(phone|pod)/.test(ua);
  var isIPad = /ipad/.test(ua);
  var isIOS = isIPhone || isIPad;
  var isAndroid = /android/.test(ua);
  var isAndroidMobile = /android(.+)?mobile/.test(ua);
  var isIE = /msie|trident/.test(ua);
  var isFirefox = /firefox/.test(ua);
  var isChrome = /chrome/.test(ua);
  var isCrios = /crios/.test(ua);
  var isSafari = /safari/.test(ua);
  var isOpera = /opera/.test(ua);
  var isOperaMobile = /opera mobi/.test(ua);
  var isOperaMini = /opera mini/.test(ua);
  var isTablet = isIPad || (isAndroid && !isAndroidMobile && !isOperaMobile);
  var isSmartphone = isIPhone || isAndroidMobile;
  var isPC = !isIOS && !isAndroid;
 
  $("html").removeClass("nojs");
 
  if(isPC){
    $("html").addClass("pc");
  }
  else if(isTablet){
    $("html").addClass("tablet");
  }
  else if(isSmartphone){
    $("html").addClass("phone");
  }
 
  $("body").append(ua + "<br>");
 
  if(isIPhone){
    $("body").append("isPhone" + "<br>");
  }
  if(isIPad){
    $("body").append("isIPad" + "<br>");
  }
  if(isIOS){
    $("body").append("isIOS" + "<br>");
  }
  if(isAndroidMobile){
    $("body").append("isAndroidMobile" + "<br>");
  }
  if(isAndroid && !isAndroidMobile){
    $("body").append("isAndroid" + "<br>");
  }
  if(isTablet){
    $("body").append("isTablet" + "<br>");
  }
  if(isSmartphone){
    $("body").append("isSmartphone" + "<br>");
  }
  if(isPC){
    $("body").append("isPC" + "<br>");
  }
  if(isWindows){
    $("body").append("isWindows" + "<br>");
  }
  if(isMac && !isTablet && !isSmartphone){
    $("body").append("isMac" + "<br>");
  }
  if(isIE){
    $("body").append("isIE" + "<br>");
  }
  if(isFirefox){
    $("body").append("isFirefox" + "<br>");
  }
  if(isChrome || isCrios){
    $("body").append("isChrome" + "<br>");
  }
  if(isOpera && !isOperaMobile && !isOperaMini){
    $("body").append("isOpera" + "<br>");
  }
  if(isOperaMobile){
    $("body").append("isOperaMobile" + "<br>");
  }
  if(isOperaMini){
    $("body").append("isOperaMini" + "<br>");
  }
  if(isSafari && !isChrome && !isCrios){
    $("body").append("isSafari" + "<br>");
  }
});
</script>
</body>
</html>

パソコン、スマホ（スマートフォン）・タブレットのユーザーエージェント判定
https://iwb.jp/s/jsua/

関連した記事