如何才能讓廣告只對移動用戶可見？

-1

我想使用一些移動廣告，但我的網站具有自適應設計，所以我不使用m。子域。如何才能讓廣告只對移動用戶可見？什麼只對臺式機或平板電腦？如何才能讓廣告只對移動用戶可見？

我使用wordpress作爲CMS。

感謝，

來源

2015-04-02 Flaviu

顯示/隱藏（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）？ – naththedeveloper 2015-04-02 10:35:54

我不會對廣告使用媒體查詢，但在頁面完成使用JavaScript加載後獲取它們。您不希望加載您不會顯示的廣告，也不希望廣告放慢初始頁面加載速度。 – jeroen 2015-04-02 10:41:08

它使用CSS3 Media Queries很容易。

在你的CSS：

@media (max-width: 480px) { 
     #ad-id { 
     display: block; 
     } 
}

對於更大的設備，其隱藏：

@media (min-width: 480px) { 
    #ad-id { 
     display: none; 
    } 
}

如果你真的關心數據下載，那麼你就必須檢測在頁面加載瀏覽器的大小，如果寬度小於特定寬度，則觸發ajax調用並獲取廣告數據並將其顯示在佔位符容器中。

$(function() { 
    if($(window).width() < 480) { 
     $("#ad-id").load("adcontent.html"); 
     // else use $.ajax for this purpose 
    } 
});

來源

2015-04-02 10:39:09 mohamedrias

你不會想要加載一些東西然後不使用它，特別是在移動和連接不好的情況下。所以這個解決方案雖然看起來很簡單，但會對性能產生影響。 – 2015-04-02 11:01:07

除非您在服務器中構建HTML並將其發送給客戶端，否則客戶端將獲取內容並限制是否顯示/不顯示。否則，您必須基於瀏覽器嗅探來觸發ajax調用以獲取添加內容。 – mohamedrias 2015-04-02 11:05:08

我已經用另一種方法更新了答案:) – mohamedrias 2015-04-02 11:09:26

請使用CSS媒體查詢。您可以顯示和隱藏移動設備的特定div。

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { }

來源

2015-04-02 10:39:43 Annshuk

一種方法是使用媒體查詢。將廣告顯示爲：默認爲none，並且僅在移動媒體查詢中添加display：block。

.ads{ 
    display:none; 
} 
@media (max-width:480px){ 
.ads{ 
    display:block; 
} 
}

來源

2015-04-02 10:39:47 Shree

儘管看上去簡單是一個相當棘手的問題。

儘量不浪費時間（已被其他開發人員花費）並使用現有的解決方案之一，如isMobile或mobile-detect.js。

此庫允許您檢測：

是手機，平板電腦或臺式機;
特定的瀏覽器版本。
操作系統;
...

來源

2015-04-02 10:44:22

可以使用CSS3媒體查詢做到這一點，

//介質+屏幕尺寸

@media（最小寬度：992px）{

.desktop-only { 
    display:block !important; 
}

}

//小屏幕尺寸

個@media（最大寬度：991px）{

.mobile-only { 
    display:block !important; 
} 

.desktop-only { 
    display:none !important; 
}

}

你可以使用以下媒體查詢大分辨率的設備，

//大分辨率僅能

@media（最小寬度：1200px）{ ... }

此外，如果您使用任何前端框架如bootstrap。那麼你可以找到像

。可見電話。可見，平板

。可見桌面

.hidden電話

.hidden片劑

一些編寫的類。隱藏式桌面

使用這些類，您可以圍繞您的內容播放以在特定設備上顯示和隱藏。與[CSS媒體查詢]

http://getbootstrap.com/2.3.2/scaffolding.html

來源

2015-04-02 10:52:38

如何才能讓廣告只對移動用戶可見？

回答

相關問題