私は、個別の「モバイル」サイトデザインとは対照的に、アダプティブWebデザイン（つまり、すべてのデバイスの表示を調整し、ビューポートサイズに基づいてコンテンツを提供する1つのデザイン）と組み合わせたレスポンシブWebデザインの支持者です。
いくつかの欠点があります。たとえば、大きなディスプレイでは、小さなビューポートサイズでは非表示になるいくつかのモジュールを含めたいです。ただし、ビューポートサイズに基づいてモジュールが非表示になっている場合、特定のモジュールがより小さなビューポートサイズで表示されないことがわかっている場合、そのモジュールをロードして実行すると、不必要なパフォーマンスヒットが発生します。
パフォーマンスを高速化するために、ビューポートサイズを使用してモジュールを効果的に無効にする（つまり、実行を停止する）にはどうすればよいですか？
回答:
Advanced Module Manager（http://www.nonumber.nl/extensions/advancedmodulemanager）を使用すると、ブラウザーのTYPEに基づいてモジュールを割り当てることができます。そのため、モバイル、デスクトップ、または特定のデバイスを選択できます。ただし、サイズで選択することはできないため、ある程度しか役立ちません。
phpとjavascriptの組み合わせでも可能です。私はこの質問を仲間に送ります。彼はアイデアを持っているかもしれません。
そのようなモジュールを無効にして、レスポンシブデザインと呼ぶべきではないと思います。レスポンシブのポイントの一部は、画面サイズごとに異なるレイアウトを印刷するだけでなく、ビューポートの変更に応答することです。
画面サイズの例によっては、ポートレートモードのタブレットがモジュールをロードしない場合がありますが、同じタブレットがランドスケープモードで一度そのコンテンツを必要とする場合があります。
これは、JavaScriptを使用してビューポートを検出できるJSクラスです。厳密なテストは行われていませんが、機能します。
function ResJS(){
this.min = 0;
this.max = 0;
this.config = config;
this.width = function(){
return jQuery(window).width();
}
this.breakpoint = function(min,max){
this.min = min;
this.max = max;
this.outside = false;
this.inside = false;
this.triggeredOut = false;
this.triggeredIn = false;
this.enter = function(callback){
var context = this;
jQuery(window).on('resize',function(){
if(context.min<context.width()&&context.max>context.width()){
if(!context.triggeredIn){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.inside = true; //browser width has entered breakpoint
context.outside = false; //browser has left another breakpoint
context.triggeredIn = true; //triggered event for breakpoint
context.triggeredOut = false; //be ready to trigger leave event
}
}else{
context.inside = false; //browser width is not within breakpoint
context.outside = true; //brower width is outside of breakpoint
}
});
if(context.min<context.width()&&context.max>context.width()){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.inside = true;
context.outside = false;
context.triggeredIn = true;
context.triggeredOut = false;
}else{
context.inside = false;
context.outside = true;
context.triggeredOut = true;
context.triggeredIn = false;
}
return this;
}
this.leave = function(callback){
var context = this;
jQuery(window).on('resize',function(){
if(context.outside&&!context.triggeredOut){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.triggeredIn = false;
context.triggeredOut = true;
}
});
return this;
}
return this;
}
return this;
}
基本的にこのように使用します
ResJS()
.breakpoint(0,600)
.enter(function(min,max){
console.log(min,max,'enter');
})
.leave(function(min,max){
console.log(min,max,'leave');
});
ブレークポイントには、幅の最小/最大パラメーターがあり、その後、JSコードを実行するコールバックを使用して、幅を入力および終了するための連鎖関数があります。
私はずっと前に作ったので、それがどのように機能するかについて詳しく説明することはできませんが、それが役立つ場合は自由に使用できます。これは、ビューポートに基づいてajaxを介してモジュールをロードするために使用できます。joomlaのcom_ajaxをこれで使用して、本当にクールな機能を作成できると思います。
別の解決策：
あなたはこのようなサーバー側デバイスの検出を使用することができます。http://mobiledetect.net/ここJoomlaのプラグインhttp://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.htmlそして、独自のmod_chromeスタイルでjoomla / templates / yourtemplate / html / modules.phpを拡張します。その後、任意のデバイスまたは解像度に対して好きな数のphp ifステートメントを記述できます。
パフォーマンスを高速化する場合は、不要なモジュールをロードしないでください。小さい画面で必要ない場合は、大きい画面でも必要ありません。
デバイスのディスプレイが大きい人は、不要なデータを読み込まない高速なWebサイトも必要です。画面が大きいほど利用可能な帯域幅が広いという誤った仮定をしていることになります。彼らはしません。
優れたデザイナーであり、画面サイズに関係なく、すべてのユーザーに最適化されたサイトエクスペリエンスを提供します。
私は通常、css @mediaを使用してこれを実現しています。画面サイズに応じて物事を簡単に非表示にし、ランドスケープタブレットが表示するのに十分な幅でポートレートの幅がそうでないときにそれらを解析します。次に例を示します。
@media (max-width:699px) {
#moduleid, .modulewrapperclass {display:none}
}
通常、これを使用してモジュールの位置全体を非表示にするため、CSSセレクターはその位置（または一部のテンプレートの位置）のラッパーに基づいています。
com_ajaxを呼び出し、現在のサイズのモジュールのみを返すjavascriptを使用して、オンデマンドで読み込むことができます。
モジュールサフィックスをメディアクエリと組み合わせて使用できます。多くのテンプレートフレームワークにはこれが既に組み込まれているため、「隠し電話」のクラスを追加して、モバイルで表示しないようにすることができます。それらをCSSヘルパークラスと呼びます：
ガントリー：http ://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md
WARP：http : //www.yootheme.com/blog/2012/06/12/warp-gets-responsive