【问题标题】: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 &gt; 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; }
        }
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-08-01
          • 1970-01-01
          • 1970-01-01
          • 2012-12-25
          • 2016-09-21
          相关资源
          最近更新 更多