Mobile Safari、フルスクリーンモード、UIWebView、どれからのアクセスか判別する

Posted on by

apple-mobile-web-app-capableというめmetaタグの値をyesにするとiOS Safariでそのページを「ホーム画面に追加」し、ホーム画面からアクセスした際にページをフルスクリーンモードで開くことができる。

<meta name="apple-mobile-web-app-capable" content="yes" />

出典：Safari HTML Reference – Supported Meta Tags

フルスクリーンモードで開いた場合、navigator.userAgentの値に「Safari」の文字列が現れなくなる。

Moble SafariでのuserAgent（iOS 5.1.1）:

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

フルスクリーンモードでのuserAgent（iOS 5.1.1）：

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206

ところで、FacebookアプリやTwitterアプリなど、投稿内容のURLを踏むと、そのアプリの中でWebページが展開されるものがある。UIWebViewというやつ。この場合のuserAgentにも、やはり「Safari」の文字列は現れない。

FacebookアプリのuserAgent（iOS 5.1.1）:

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206 [FBAN/FBIOS;FBAV/5.1;FBBV/68414;FBDV/iPhone4,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/5.1.1;FBSS/2; FBCR/KDDI;FBID/phone;FBLC/ja_JP]

TwitterアプリのuserAgent（iOS 5.1.1）:

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206

というわけでSafariという文字列があるかないかを頼りに、フルスクリーンモード、ないしはUIWebViewからのアクセスを判別しようとすると失敗する。 しかし上記出典のSafari HTML Referenceによると、フルスクリーンモードではwindow.navigator.standaloneというプロパティがtrueになるらしいので試した。

デモ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フルスクリーンモードを判別できるか</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
userAgent:
<script>
document.write(navigator.userAgent);
</script>
<br />
<br />
navigator.standalone:
<script>
document.write(navigator.standalone);
</script>
<br />
<br />
Full Screen (Standalone) Mode?:
<script>
var ua = navigator.userAgent.toLowerCase();
var env = {};
env.isIPhone = /iphone/.test(ua);
env.isIPad = /ipad/.test(ua);
env.isIOS = env.isIPhone || env.isIPad;
if (env.isIOS && navigator.standalone) {
env.isStandalone = true;
} else {
env.isStandalone = false;
}
document.write(env.isStandalone);
</script>
</body>
</html>
view raw detectiosstandalone.html hosted with ❤ by GitHub

iPhone/iPadのどちらでも、フルスクリーンモードのみでwindow.navigator.standaloneがtrueになるのを確認できた。

userAgent文字列からiPhone/iPadであることを判定した上で、

  • userAgentにSafariの文字列あり → Mobile Safari
  • userAgentにSafariの文字列なし、かつwindow.navigator.standalone === true → フルスクリーンモード
  • userAgentにSafariの文字列なし、かつwindow.navigator.standalone === false → UIWebView

という判定をすることができる。