レスポンシブサイトの構築の概要
世界の全ページビューの半分以上は、携帯電話やタブレットなどのモバイルデバイスからアクセスされています。 どのサイトも、モバイルデバイスで表示した場合に、デスクトップで表示した場合と同様に見栄えをよくする必要があります。 Liferay DXPでは、どのデバイスがサイトにアクセスしても、可能な限り最高のエクスペリエンスを提供することができます。
Liferayでは、すぐに使えるレスポンシブレイアウトを使用しています。
LiferayのUIフレームワークを使用するDXPウィジェットとカスタムウィジェットは、画面サイズに合わせて自動的にスケーリングされます。
ナビゲーションやプロダクトメニューなどのUI要素は、小さい画面でも引き続き使用できるように自動的に調整されます。
画面幅が狭い場合、Liferayはすべてのコンテンツが読みやすいように列を結合します。
テーマツールは、Web開発者が最適なモバイルパフォーマンスを確保するのに役立ちます。
デフォルトのテーマを使用している場合、モバイルデバイスでページを表示するために必要なのはページを作成することだけです。 すべてが意図したとおりに表示されていることを確認するためのツールもあります。 デバイスシミュレータ（
）は、さまざまなデバイスでページがどのように表示されるかを示します。
デバイスシミュレータの使用
ページを作成したり、公開する前にページを確認したりする場合は、すべてのページの右上隅にあるデバイスシミュレータを使用してテストする必要があります。 シミュレータは、さまざまな表示タイプに基づいて、現在のページをさまざまな解像度で表示します。 3つの事前定義されたオプションがあります。
デスクトップ： 幅を修正して、ページをフルサイズで表示します。
タブレット： ページをタブレットサイズのボックスに入れます。
モバイル： ページをスマートフォンサイズのボックスに入れます。
表示オプションも2つあります。
自動サイジング： ブラウザウィンドウの幅に基づいてページを縮小および拡大します。
カスタム： ページをテストするための特定のサイズを入力します。
最新のモバイルブラウザはデスクトップブラウザと同じテクノロジーに基づいて構築されているため、シミュレータに表示される動作は、モバイルデバイスでの動作と一致するはずです。 レイアウトの見栄えが良く、すべての機能が維持されていることを確認することに加えて、自動機能（低解像度時に列を結合する方法など）が意図しない影響を与えないようにすることも重要です。
モバイルフレンドリーページのデザイン
あらゆる種類のデバイスで優れたエクスペリエンスを提供するページを構築することは、Web開発と公開のすべてのレベルで作業することを意味します。 テーマ開発者は、Liferayのフレームワークを使用してテーマを作成し、あらゆる種類のディスプレイにコンテンツを適切にスケーリングする必要があります。 デザイナーは、ページをデザインするときに複数の画面サイズを念頭に置く必要があります。 そして、何かを公開する前には、最高のエクスペリエンスを提供できるように十分に確認する必要があります。
モバイルデバイスルールの作成（7.2のみ）
モバイルデバイスルールは、Liferay7.2以前でのみ使用できます。 Liferay Mobile Device Detection Liteは廃止予定となり、7.3で削除されました。
モバイルデバイスの検出時のサイトの動作を管理するモバイルデバイスルールを作成できます。 多くの異なるデバイスがあり、それぞれに独自の特性があります。 その違いを見分けるには、デバイスの特性を確認する方法が必要です。 一部の特性はデバイスによって提供されますが、ほとんどは提供されていません。 このため、何千ものデバイスに関する情報が含まれているデータベースがあります。 これらのデータベースを使用して、デバイスタイプからデバイスに関するすべての詳細を知ることができます。 モバイルデバイスルールはデバイスデータベースに接続できるため、ルールでデバイスの特性を使用できます。
モバイルデバイスルールを作成する方法については（Liferay 7.2のみ）、 モバイルデバイスルールの作成 を参照してください。