とても単純なことだけど自分用にメモ。
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]
横向きか縦向きかも判断しています。
もっとスマートな判別方法があったらいいのにな…
どなたかご存知だったら教えてください。
参考サイト）
コメント
コメント一覧 （1件）
[…] [修正]iPadのSafariでwebclip(webAppモード)かどうかを判断するJavascript mobile safariのmetaタグのサポートをまとめてみた iOSでウェブサイトをフルスクリーン表示させる Memo, [iOS][mobile Safari]フルス […]