LIQUID PRESS テーマ iPhone X 対応状況

LIQUID PRESS INFORMATION

LIQUID PRESS シリーズテーマでは、iPhone X の表示検証を行っております。

対象テーマ

  • LIQUID PRESS シリーズ(0.9.7.2)

iPhone X 対応状況

LIQUID PRESS では、iPhone X Safari において、問題なく表示されることを確認しております。 iPhone X

Landscapeモード

iPhone X では、上部のカメラ部分でディスプレイが部分的に欠ける(ノッチ)デザインになっており、 Landscapeモード(横向き)の場合、Webページの左右にマージンが表示される仕様になっています。 iPhone X マージン 出典:Apple Human Interface Guidelines iOS iPhone X

これについて、iOS 11ではマージンを無くしてフルスクリーンで表示するオプションも用意されています。 オプションはViewportタグおよびCSSで指定します。

カスタマイズ方法

Viewportカスタマイズ

LIQUID PRESS では、Viewportをカスタマイズすることができます。
マージンを無くしてフルスクリーンで表示するには下記のように指定します。

管理画面>外観>カスタマイズ>オプション>Viewportカスタマイズ

例:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

ドロップダウンメニュー

また、ヘッダーのメニューについて、すべての端末でドロップダウン表示にするオプションがあります。 メニュー項目が多い場合でもコンパクトに表示することができます。

管理画面>外観>カスタマイズ>オプション>ドロップダウンメニュー

  • する:全ての端末でドロップダウン表示
  • しない:PCとタブレットでドロップダウン表示(デフォルト)

カスタマイズイメージ

変更前

iPhone X

変更後

iPhone X

設定画面

iPhone X

その他

iPhone X のフルスクリーン表示については、CSSで余白を調整することもできます。詳しくは下記をご参照ください。

ご注意

※設定項目が表示されない場合はテーマのアップデートについてご確認ください。
※上記画面は、iPhone X(Simulator)で確認および開発中のものです。実際の表示とは異なる場合があります。
※フルスクリーン表示のオプションは、iOS 11で新たに追加された機能です。旧OS等で問題が発生する可能性がありますので、検証を行った上でご利用ください。
※カスタマイズについては導入サポート対象外とさせて頂いております。何卒ご了承ください。

開発状況の公開

LIQUID PRESS では、GitHubにてテンプレートの開発状況および更新履歴を公開しています。
詳しくは下記をご参照ください。開発状況の通知を受け取るには「Watch」してください。
https://github.com/lqdjp/liquid-press/issues

LIQUID PRESS

» 使い放題 » テーマ一覧

PageTop