【WordPress】JavaScript でブラウザ（Edge、Chrome、Safari ）を判定する方法

2024年6月9日

ブラウザによっては特定の CSS の動きが違う（動かない）など特徴があります。ブラウザごとに表示や動作を分ける必要がある場合、利用しているブラウザを判定する必要がありますね。

ポイント

本記事では、

JavaScript でブラウザを判定する方法を

解説します。

簡単です。

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 いま、利用しているブラウザ
2 ブラウザ判定方法
3 まとめ：ブラウザ（Edge、Chrome、Safari ）を判定する方法

いま、利用しているブラウザ

Point.

利用している
ブラウザ

インターネットでホームページにアクセスした際、ブラウザ（クライアント）は、ホームページ（サーバー）に対して自分が何者か（自分が使っているブラウザ）情報を送信しています。

送信している情報をユーザーエージェント（UserAgent ：略して UA）と言います。

ユーザーエージェントは JavaScript で取得することが可能です。あなたのブラウザのユーザーエージェント情報を表示します。

今使っているブラウザから送信されているユーザーエージェントはこちら

今使っているブラウザはこちら

※実際は Edge でも Chrome と判断される場合があります。

ブラウザ判定方法

Point.

ブラウザ
判定方法

ブラウザを判定するには、ユーザーエージェントの中にある文字を比較します。

ただし、一つのブラウザに複数のキーワードが存在する場合があり（例：chrome は「chrome」と「safari」の２単語が同時に存在する）、順番に見ていく必要があります。

ブラウザを判定する JavaScript サンプル

<script>
    function getBrowser() {
        const userAgent = window.navigator.userAgent.toLowerCase();
        let browserName = "不明なブラウザ";

        if (userAgent.indexOf("firefox") > -1) {
            browserName = "Firefox";
        } else if (userAgent.indexOf("opera") > -1 || userAgent.indexOf("opr") > -1) {
            browserName = "Opera";
        } else if (userAgent.indexOf("trident") > -1) {
            browserName = "Internet Explorer";
        } else if (userAgent.indexOf("edge") > -1) {
            browserName = "Microsoft Edge";
        } else if (userAgent.indexOf("chrome") > -1) {
            browserName = "Google Chrome";
        } else if (userAgent.indexOf("safari") > -1) {
            browserName = "Safari";
        }

        return browserName;
    }
</script>

なお、ユーザーエージェントはブラウザを作る会社が指定しているので将来にわたって保証されるものではありません。利用者がブラウザのユーザーエージェントを改ざんすることもできるため、必ずではないという点にはご注意ください。

WordPress のお役立ちテクニックはこちら

まとめ：ブラウザ（Edge、Chrome、Safari ）を判定する方法

ブラウザを判定するためには、ユーザーエージェントの中にある文字を比較します。

ポイント

ユーザーエージェントの中にある文字を比較する
JavaScript で比較するのが簡単である

簡単ですね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る