HTML/CSS廣告位置修復

我需要在我的網站正文旁邊顯示2個廣告容器（右側），但只有在桌面/屏幕尺寸大於我的網站容器時才應顯示廣告寬度。本網站主要針對手機&我不需要在手機上展示廣告，因爲我們無法在手機屏幕中容納此廣告。HTML/CSS廣告位置修復

鑑於我下面的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>

感謝

來源

2013-02-21 Ajeesh Joseph

我通常會說「使用CSS3媒體查詢」，但在這種情況下，躲藏在箱子不夠好 - 你會產生欺詐性的意見這種方式，特別是在網站主要針對移動設備。

取而代之，使用JavaScript檢測if(screen.width > 800)（根據需要調整數字），並且只在條件爲真時插入廣告。

來源

2013-02-21 06:08:58

您可以通過嗅探用戶代理來識別瀏覽器和操作系統。然後，您可以通過在JavaSript中設置條件語句來投放廣告。如果平臺ID爲桌面，則顯示廣告，否則隱藏廣告。

指這個計算器問題Mobile detection

而這一次也Auto detect mobile browser (via user-agent?)

而且谷歌搜索更多的選擇。

來源

2013-02-21 06:11:37

您有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-21 06:21:59

HTML/CSS廣告位置修復

回答

相關問題