從手機或計算機中檢測用戶，並在其他位置展示廣告

Question

我有一個反應迅速的網站。 當用戶從移動設備瀏覽並希望顯示在菜單下時，我想禁用標題廣告橫幅。

我的主題有一個選項來放置我添加的標題代碼。 但我想禁用它，如果用戶來自移動設備，並希望在菜單欄下顯示它。

是什么成就了能力。 如是。 您的指導是必需的。

問候，納茲

Answer 1

我總是用下面的代碼，當我必須 ：

 var desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
 var orientationSupport = !!window.DeviceOrientationEvent;

if(desktop && !orientationSupport) {
    // your code for desktop pc's
}

但是請考慮使用功能檢測，而不是Modenizer是一個很好的起點，甚至源代碼也很容易理解。

編輯 ：

在這里找到了另一個答案，它為類似的問題提供了見解。

Answer 2

試試這個：當我在google上時，我得到了這個用於檢測移動網站的信息。 這可能對您有幫助。

<script>
var isMobile = {
Android: function() {
    return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};

if( isMobile.any() ){
//Load mobile site
}else{
// Desktop Site
} 

Answer 3

幾年來，出現了另一種哲學。 機器和操作系統太多了。

如今，許多設計人員認為，移動計算機和台式計算機（以及后來的表格）之間的唯一區別是屏幕的寬度。

視口的寬度為“寬度=設備寬度”的HTML頁面保留像素與物理尺寸（如英寸）之間的關系。 這意味着在使用移動設備或台式機時，應該幾乎測量相同的像素。 這意味着移動設備中的300px div超過300px div應該看起來幾乎與台式機相同。

這也意味着隨着屏幕的物理變小，以像素為單位的窗口寬度會變小。

簡而言之，您可以使用768px的窗口寬度邊界來區分移動應用程序和桌面應用程序。

就性能而言，相對於根據窗口寬度顯示和隱藏內容的JavaScript代碼，CSS顯然是首選。

// desktop css
.ad {
  display: block;
}

@media screen and (max-width: 768px) {
  // mobile css
  .ad {
    display:none;
  }
}