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

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

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

【コンテンツ】

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

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

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

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

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

設定方法

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

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

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

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥28,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ