0

ウェブサイトの本文（右側）の横に2つの広告コンテナを表示する必要がありますが、デスクトップ/画面サイズ=ウェブサイトのコンテナ幅よりも広い場合にのみ広告を表示する必要があります。このウェブサイトは主にモバイル向けであり、モバイル画面に広告を掲載することはできないため、モバイルで広告を表示する必要はありません。

以下の私のhtmlコードを考えると;

<div style="width:320px; height:500px; background-color:#C60; margin:0 auto;">Website</div>
<div id="ad-contextual" style="width:222px; height:150px; float:left; margin-right:20px; background-color:#39F;">Contextual Ads</div>
<div id="ad-sky" style="width:222px; height:600px; float:left; background-color:#996;">Skyscrapers Ads</div>

ありがとう

4

3 に答える 3

1

通常、私は「CSS3 メディア クエリを使用してください」と言いますが、この場合、ボックスを非表示にするだけでは十分ではありません。サイトが主にモバイル デバイス向けである場合は特に、不正なビューを生成することになります。

代わりに、JavaScript を使用して検出if( screen.width > 800)(必要に応じて数を調整) し、条件が true の場合にのみ広告を挿入します。

于 2013-02-21T06:08:58.527 に答える
0

ユーザー エージェントをスニッフィングすることで、ブラウザとオペレーティング システムを識別できます。次に、JavaSript で条件ステートメントを設定することにより、広告を配信できます。プラットフォーム ID がデスクトップの場合は広告を表示し、それ以外の場合は広告を非表示にします。

このstackoverflowの質問を参照してくださいモバイル検出

これもモバイルブラウザを自動検出します（ユーザーエージェント経由？）

その他のオプションについては、Google も検索してください。

于 2013-02-21T06:11:37.163 に答える
0

これを行うには 2 つの方法があります。

最初に jQuery を使用します。

var pagewidth = $(window).width();
if (pagewidth > 320) {      
    $("#ad-contextual").css("display", "block");
    $("#ad-sky").css("display", "block");

}
else { 
    $("#ad-contextual").css("display", "none");
    $("#ad-sky").css("display", "none");
}

次に、CSS メディア クエリを使用します。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
     #ad-contextual { display:none; }
     #ad-sky { display:none; }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
     #ad-contextual { display:none; }
     #ad-sky { display:none; }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
     #ad-contextual { display:none; }
     #ad-sky { display:none; }
}
于 2013-02-21T06:21:59.063 に答える