コンテンツにスキップ

タブレット

タブレットアプリケーションの設定を行う画面です。
タブレットアプリケーションはWebアプリケーションとPWA (Progressive Web Apps)のハイブリッドです。 Webアプリケーションはブラウザで表示可能です。PWAはスマートフォンへインストールを行い実行します。PWA動作にはマニフェスト設定が必要です。
viewportの設定が、v3.4.0から可能になりました。タブレットアプリケーションの表示領域を調整できます。

マニフェスト

PWAの動作に必要なマニフェスト設定を行います。

項目説明対応するメンバ
アプリ名アプリケーション名
デフォルトはアプリケーションラベルが設定済み
name
アプリのショートネームホーム画面など狭い表示領域ではこちらが優先されます。short_name
説明アプリケーションの説明になります。description
アプリアイコン 512 x 512 px大きなアイコン。縦横 512pxのPNGイメージを用意します。icons
アプリアイコン(マスク可)512 x 512 px大きなアイコン。縦横 512pxのPNGイメージを用意します。Android向けにマスク表示したアイコンです。(円形のクリッピング)icons
アプリアイコン 192 x 192 px小さなアイコン。縦横 192pxのPNGイメージを用意します。icons
アプリアイコン(マスク可)192 x 192 px小さなアイコン。縦横 192pxのPNGイメージを用意します。Android向けにマスク表示したアイコン(円形のクリッピング)icons

Viewport

タブレットアプリケーションの表示領域を調整するためのviewport設定を行います。

項目説明
幅(width)ビューポートの幅を設定します。
device-width: デバイスの画面幅に自動で合わせます
1180: 固定幅1180pxで表示します
初期ズーム倍率(initial-scale)ページを開いたときの拡大率を設定します。
1.0を推奨します(100%表示)。
デバイス幅が1180で固定の場合選択できません。
画面フィット方式(viewport-fit)画面の表示範囲を設定します。
自動(auto): 自動調整(デフォルト)
セーフエリアに収める(contain): 安全領域内に収める
全画面に広げる(cover): 画面全体を使用(ノッチがある端末で有効)