« 電子書籍ビューア、T-Time | トップページ | MacBookパームレスト割れ修理完了 »

iPhoneのスクリーンモードを検出する

この間作ったiPhone用Webアプリ、ちょっと手を入れてみました。

iPhoneってiPadとか含めても画面デザインのバリエーションがないから、普通にWebサイト作るのと比べて楽だなぁと思っていたんですが、落とし穴がありました。sweat01

左側みたいに320×480サイズでデザインすると、通常モードではツールバーが表示されるので右側のように320×460サイズしか使えないわけです。フッターエリアで能書きが隠れちゃいました。weep

フルスクリーンモード通常モード

他人にチェックしてもらうとこういうモノもちゃんと見つけることができます。自分チェックだと先入観があってダメですね。

で、どう対処するか?どうしてもね、Webアプリなので初回はSafariでアクセスしてもらうことになります。高さ460pxに収まるデザインというのもひとつの解ですが、ネイティブアプリっぽく使ってもらいたいという思いからするとホーム画面にアイコン登録してほしいっ。o(>v<)o

そこで、動作中のスクリーンモードを調べて状況に応じて警告を発することにしました。

警告画面モバイルSafariのスクリーンモードはwindow.navigator.standaloneオブジェクトで知ることができます。フルスクリーンモードではtrueを、ブラウザモード(?)ではfalseを返すので、JavaScriptでこれを調べてみました。

falseのときだけ警告画面を発します。フルスクリーンではtrueなので警告は出ません。

if(!window.navigator.standalone){
    alert("message");
}

|

« 電子書籍ビューア、T-Time | トップページ | MacBookパームレスト割れ修理完了 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/546956/50074557

この記事へのトラックバック一覧です: iPhoneのスクリーンモードを検出する:

« 電子書籍ビューア、T-Time | トップページ | MacBookパームレスト割れ修理完了 »