Question

我需要在我的网站正文（右侧）旁边显示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>

由于

Answer 1

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

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

Answer 2

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

参考此stackoverflow问题Mobile detection

这个也Auto detect mobile browser (via user-agent?)

还可以在Google上搜索更多选项。

Answer 3

您有两种方法可以执行此操作：

首先使用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 Media Query：

/* 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; }
}

HTML / CSS和定位

3 个答案: