[修正]iPadのSafariでwebclip(webAppモード)かどうかを判断するJavascript

とても単純なことだけど自分用にメモ。

iPadのSafari上でどうしても キャッシュさせたwebClip(webAppモード)として表示されてるのかどうかをJavaScriptで判別したかった。


window.applicationCache 周りもいろいろ試したけど、判別する方法としては使えなかった。
(使い方が悪かったのかもしれないけども)

window.applicationCache.UNCACHED はもろそれっぽかったのに、どうしてかうまくいかなかった。

なので強引に、webClipかどうかをsafariのツールバーをOFFにしてる前提で、innerHeightで判断することにしました。

2011/09/19 UPDATE

window.navigator.standalone で一発でした!

CSS Nite LP17の私のセッション中に、JavaScriptの凄い人 @Takazudo さんがTwitter経由でつぶやかれたのがビンゴでした。

実際に試して、動作確認取れました。

[javascript]
if( window.navigator.standalone) {
alert(‘webclipです’);
} else {
alert(‘通常Safariです’);
}
[/javascript]
なんてシンプル。
2−3ヶ月悩んでた問題がたったこれだけで解決しちゃいました。
もちろん、iPadに限らず、iPhoneでも利用可能です。

@Takazudo さんに改めて感謝!

 

以下、参考のために前のやり方を残しておきます。

前提条件

  • ページを全画面表示でツールバーを消す: meta name=”apple-mobile-web-app-capable”
  • 倍率初期値は 1倍
  • Viewportの横幅はiPad標準横幅で

webClip(webAppモード)かを判別するJavaScript

[javascript]
/* 関数:webappモードと通常SafariをinnerHeightの違いで判別する関数
返り値: webappモード(webclip)時: true, 通常Safari時: false

メモ) スケール1倍 ( )
◯縦向き
・webappモード: w768, h1024
・通常Safari: w1024 h946
◯横向き
・webappモード: w1024, h768
・通常Safari: w1024 h690
*/
function webclipedCheck() {
var iW = window.innerWidth;
var iH = window.innerHeight;
if( iW < iH ) { //縦向き時
if(iH >= 1024 ){ //webAppモード
return true;
} else { //通常のSafari
return false;
}
} else { //横向き時
if(iH >= 768 ){
return true;
} else {
return false;
}
}
}

if( webclipedCheck() ) {
alert(‘webclipです’);
} else {
alert(‘通常Safariです’);
}
[/javascript]

横向きか縦向きかも判断しています。
もっとスマートな判別方法があったらいいのにな…
どなたかご存知だったら教えてください。

参考サイト)

[修正]iPadのSafariでwebclip(webAppモード)かどうかを判断するJavascript” への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*