グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

以前も引っかかったことのある問題なので、忘れないよう書いておこうと思います。

JavaScriptでユーザーエージェントを取得してSafariを判別したい場合、
以下のようになります。
※2018.7.11 コメントでEdgeの件ご指摘いただいたので追記しました
※2016.9.9 ソースの括弧が多かったので修正しました

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1){
// ここにSafari用の記述
}

一見正しそうですが、実はこれだと問題が・・。
Google Chromeのユーザーエージェントを見てみます。

例）
Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36

そこにはSafariの文字が！
ですので上記の振り分けだと、Chromeまで対象になってしまいます。
Safariのみを対象にする場合はChromeを除外して、

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1){
// ここにSafari用の記述
}

とすることで実装できます。


※2018.7.11 追記
さらにEdgeにも Safari の文字が入っているとご指摘いただきました。ありがとうございます。

■Microsoft Edge のユーザーエージェント
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 Safari/537.36 edge/17.17134

入っています・・。
chrome とも入っているので結果的に chrome 用の記述が効いていますが、
念の為 Edge も追加しましよう。

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1 && ua.indexOf('edge') === -1){
// ここにSafari用の記述
}

これでOKです。