jQuery Mobile フルスクリーンモードを設定する

jQuery Mobile ではヘッダーとフッターを固定表示し、重要なナビゲーションなどを常に表示しておくことができます。しかし写真など画面一杯に表示したいコンテンツでは固定表示は邪魔になるので、フルスクリーンモードを設定して表示領域を拡げます。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. フルスクリーンモードの概要
  2. 設定方法

【記事執筆時の環境】
jQuery Mobile 1.4.5

フルスクリーンモードの概要

フルスクリーンモードを設定しておくと、画面をタップしたときに固定ヘッダーと固定フッターは解除され、コンテンツ領域と同じように画面スクロールで移動するようになります。
もう一度タップすると再び固定モードに戻ります。

フルスクリーンモードの説明図

設定方法

フルスクリーンモードを設定するには、ページ要素に「data-fullscreen="true"」を指定します。
ヘッダー要素とフッター要素には「data-position="fixed"」を指定し、固定ヘッダーと固定フッターにしておきます。

フルスクリーンモードを設定しておくと便利ですが、ユーザーは画面をタップすることによりフルスクリーンモードに切り替わるとは普通知りませんので、どこかに操作説明を記述しておくとよいでしょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ