【超簡単】ユーザーエージェントでSafariの判定を行う方法！

2025年2月20日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

ユーザーエージェントでSafariの判定を行う方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴9年）で、資格は13個保有しています。

「ユーザーエージェントでSafariの判定を行う方法が知りたい」とお考えではありませんか？

結論、ユーザーエージェントでSafariの判定を行うのは超簡単です。

いずみ

ただ、WebViewも考慮するとややこしくなるので地味に大変でした…

ということで、本記事ではユーザーエージェントでSafariの判定を行う方法を解説します。

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
投資歴5年（仮想通貨・FXが得意）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

ユーザーエージェントでSafariの判定を行う方法

早速ですが、ユーザーエージェントでSafariの判定を行う方法を解説します。

いずみ

今回はTypeScriptで解説しますね。

/**
 * Safariかどうか
 *
 * @return Safariかどうか
 */
isSafari(): boolean {
  const ua = navigator.userAgent.toLowerCase();

  const isSafari =
    ua.includes('safari') &&
    // Chrome、iOS版Chrome、iOS版FirefoxはSafariという文字列を含むので除外する
    !ua.includes('chrome') &&
    !ua.includes('crios') &&
    !ua.includes('fxios');

  // WebViewの場合はSafariという文字列を含まないため個別に確認が必要
  const isIosWebView = (ua.includes('iphone') || ua.includes('ipad')) && ua.includes('applewebkit') && !ua.includes('safari');

  return isSafari || isIosWebView;
}

上記のコードでSafariの判定が可能です。

いずみ

通常はユーザーエージェントに「safari」という文字列が含まれます。

ただ、Chrome等も「safari」という文字列を含むのと、WebViewの場合は「safari」という文字列がないので別途確認が必要です。