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

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になるらしいので試した。

デモ

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

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