みかづきブログ その3

3ヶ月つづけてみました。

iPhoneでページを開いているブラウザがSafariかどうか判定したいという想い。 😎

Safari以外のブラウザ(アプリのWebViewとか)で開かれた際に、Safariで開き直して欲しいという要望をよく受けるので、愚直にUserAgentで判定を試みました。
まずは、各ブラウザのUAをまとめます。

Safari
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.4.6 (khtml, like gecko) version/10.0 mobile/14d27 safari/602.1
Facebook
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.4.6 (khtml, like gecko) mobile/14d27 [fban/fbios;fbav/83.0.0.38.70;fbbv/51754296;fbdv/iphone8,4;fbmd/iphone;fbsn/ios;fbsv/10.2.1;fbss/2;fbcr/uqmobile;fbid/phone;fblc/ja_jp;fbop/5;fbrv/0]
Twitter
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.3.12 (khtml, like gecko) mobile/14d27 twitter for iphone
LINE
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.4.6 (khtml, like gecko) mobile/14d27 safari line/7.1.2
Chrome
mozilla/5.0 (iphone; cpu iphone os 10_2_1 like mac os x) applewebkit/602.1.50 (khtml, like gecko) crios/56.0.2924.79 mobile/14d27 safari/602.1


はじめは、UAに「safari」という文字列があるか否かで判定を試みたのですが、LINE、Chromeに「safari」という文字列が入っているために断念。
なので、泣く泣くFacebookでもTwitterでもLINEでもChromeでもなければSafariという判定にしました。
他に非対応ブラウザが増えた場合は、そのブラウザのUAを調べなければなりません。


JavaScript
var ua = navigator.userAgent.toLowerCase(),
    isIOS = /iphone|ipod|ipad/.test(ua),
    isLine = /line/.test(ua),
    isFb = /fb/.test(ua),
    isTw = /twitter/.test(ua),
    isSafari = /safari/.test(ua),
    isChrome = /crios/.test(ua),
    msg = "Safariで";


if (isIOS) {
    if (isLine || isFb || isTw || isChrome) {
        msg += "はありません。";
    } else if (isSafari) {
        msg += "す。";
    } else {
        msg += "はありません。";
    }
} else {
    msg = "iPhoneではありません。";
}

msg += "<br />" + ua;

document.write(msg);
DEMO