HTML / CSS 广告位置固定答案

【问题标题】：HTML / CSS Ad position fixingHTML / CSS 广告位置固定
【发布时间】：2013-02-06 09:14:50
【问题描述】：

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

谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

参考这个stackoverflow问题Mobile detection

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

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

【讨论】：

【解决方案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 媒体查询：

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

【讨论】：