web-dev-qa-db-ja.com

レスポンシブテーマのブロックの管理

私はオメガに基づいたレスポンシブなテーマを始めたばかりで、最初はモバイルレイアウトに集中しています。

モバイルレイアウトに含めるには多すぎると思われる特定のブロックと、そのレイアウトのために特別に導入する必要のある他のブロックがあります(淡色のメニュー、トーンダウンしたユーザーバーなど)。

CSSを使用して、モバイルレイアウトの不要なブロックを簡単に非表示にして、デフォルトのレイアウトにモバイル固有のブロックを含め、それらを非表示にすることができます(そのため、モバイルでのみ表示されます)。それ。ブロックが表示されていない場合、それらによって発生する追加のオーバーヘッドは実際には受け入れられません(特に、非表示のブロックのコンテンツが追加する追加のdbクエリの数を考慮すると)。

ページ作成の早い段階でブロックの意思決定プロセスをインターセプトし、いくつかのOS検出に基づいてブロックを除外/含めるためのすてきなクリーンな方法があるはずだと思いますが、それがどのようになるかについて空白を描いています可能。

Varnishがこのサイトの前で実行されているという事実も取り入れます。

これを助けることができるモジュール/既知の戦略はありますか?

サイトはすでに完全に機能しているため、Contextモジュールを使用することはオプションではないことを付け加えておきます。この時点で、サイトをContextに移動することは大規模な作業になります。

15
Clive

ページ作成の早い段階でブロックの意思決定プロセスをインターセプトし、いくつかのOS検出に基づいてブロックを除外/含める

ワニスはこのサイトの前で実行されています

すでにコメントで述べられているように、これはワニスをリクエストURLでのみnotキャッシュに設定する必要がありますが、ユーザーエージェントによっても異なります。ワニスwikiに関連する例 VCLExampleNormalizeUserAgent があります。

リクエストが実際にdoesサイトにヒットしたら、表示するブロックと表示しないブロックを決定する必要があります。 eval を使用してこれを行うのは惨事ではないかと考えます。そのため、最も一般的なオプションは Context および Panels です。

サイトはすでに構築されています。いずれかのモジュールですべてのページ/ブロックの配置をやり直すことはおそらくオプションではありませんが、プロファイラーで 80-2 を適用すると、特定のページのみをやり直すことでパフォーマンスを大幅に向上させることができます。

4
Letharion

私は年齢のどちらのモジュールも使用していないため、lotの詳細にはアクセスできません(Wordのコンテキストを使用してすべてのサイトを構築し、私はしばらくビルドしていないもので応答性が高いので、以前はこの問題がありませんでした)が、モバイルツールとスペースを組み合わせて何かを作成できるはずです。

スペース

スペースは、一般に構成オプションをサイト全体のレベルでのみ使用可能にして、Drupalサイト上の個々の「スペース」によって上書きできるようにすることを目的としたAPIモジュールです。次のように記述されています:

  • 1つのDrupalサイトを複数のサイトのように機能させる方法
  • はるかに構成可能なフル機能のオーガニックグループまたはユーザーホームページを提供する方法
  • コンテキスト構成用の汎用API

モバイルツール

モバイルツールモジュールは、Drupal開発者に、訪問者のデバイスに基づいてサイトを調整するのに役立ついくつかのツールを提供します。

MTのプロジェクトページは、まだ生産の準備ができていないことを示していますが、これは問題になる可能性があります。最後のコミットが今月だったため、いつ更新されたかによって異なります。

* EDIT

私はこれらについて完全に忘れました!

Browscap

Browscapは、PHPのget_browser()関数の改良版を提供します。

Browscapブロック

Browscap Blockは、ブロック構成設定に表示オプションを追加して、モバイルデバイスのブロックを非表示または表示できるようにします。

Browscapはサーバーの設定に依存しますが、使用できる場合は、2番目のモジュールにより、ブロック編集ページの各ブロックに追加の可視性設定が提供されます。

enter image description here

10
Chapabu

Mobile Detect Block を使用することもできますが、現在、ウィンドウ幅とAdaptiveThemeまたはBreakpointsモジュールのいずれかで機能するソリューションを探していますメディアクエリを実行して、そのコードを複製しないようにし、エンドユーザーによるダウンロードの量を減らしてください。また、Mobile Detectがテストした1つのデバイスでピックアップされないという結果もありました。そのため、信頼できる結果を提供できない場合、Browscapのようにかなり役に立たなくなります。

一部のディスカッションでは、何らかの理由でBrowscapから離れたがる人がいるため、 Mobile Detect に移行します。

0
deanflory

jQueryクロスブラウザーサポートを使用して、画面の解像度を取得できます。

var browserWidth  = $(window).width();
var browserHeight = $(window).height();

簡単なPHPスクリプトを追加して、関連するブロックの設定を表示します。

0
monymirza