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.standalonetrueになるのを確認できた。

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *