ユーザーエージェントに依存しない、JavaScriptでのブラウザハックまとめ

ユーザーエージェントに依存せず、ブラウザがサポートしている機能で判定を行う

JavaScript ユーザエージェント条件分岐便利スニペット
https://w3g.jp/blog//js_browser_sniffing

UA情報には依存しないブラウザがサポートしている機能でブラウザ判別を行う試みです。

基本的に上記のページのコードをベースにして、Microsoft Edge対応も含め改変したものです。

var supportHack = (function() {
  return {
  IE9:document.uniqueID && document.documentMode == 9,
  IE10:document.uniqueID && document.documentMode == 10,
  IE11:document.uniqueID && document.documentMode == 11,
  Trident:document.uniqueID,
  Edge:'-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style && !window.navigator.msPointerEnabled,
  Gecko:'MozAppearance' in document.documentElement.style,
  Presto:window.opera,
  Blink:window.chrome && window.chrome.webstore,
  Webkit:!window.chrome && 'WebkitAppearance' in document.documentElement.style,
  Touch:typeof document.ontouchstart != "undefined",
  Mobile:typeof window.orientation != "undefined",
  ltAd44:typeof window.orientation != "undefined" && typeof(EventSource) == "undefined",
  Pointer:window.navigator.pointerEnabled,
  MSPoniter:window.navigator.msPointerEnabled
  }
})();

詳しい変更点は以下になります。

• Edgeを追加
• BlinkがEdgeにも判定されていたので、window.chrome.webstoreを追加
• レガシーIEを削除してIE9以降のみに変更

上記に含まれないハックでは以下のサイトが参考になります。

Browserhacks
http://browserhacks.com/