0

I need 2 ad containers to be displayed next to my website body (right hand side), but the ads should be displayed only if I am in a desktop / screen size = wider than my website container width. This website is mainly for mobile & I don't need the ads to be displayed in mobile, because we cannot accomodate this ads in mobile screen.

Given my html code below;

<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>

Thanks

4

3 回答 3

1

通常我会说“使用 CSS3 媒体查询”，但在这种情况下，隐藏该框还不够好 - 您会以这种方式生成欺诈性视图，尤其是如果该网站主要用于移动设备。

相反，使用 JavaScript 来检测if( screen.width > 800)（根据需要调整数量）并仅在条件为真时插入广告。

于 2013-02-21T06:08:58.527 回答
0

您可以通过嗅探用户代理来识别浏览器和操作系统。然后您可以通过在 JavaSript 中设置条件语句来投放广告。如果平台 id 桌面，则显示广告，否则，隐藏广告。

参考这个stackoverflow问题移动检测

这一个也自动检测移动浏览器（通过用户代理？）

也可以搜索谷歌以获取更多选项。

于 2013-02-21T06:11:37.163 回答
0

您有两种方法可以做到这一点：

首先使用 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 回答