Dynamic Ad Loading by Screen Size: The Complete CDN-Friendly Solution

Posted by

admin

2025 年 7 月 21 日

On 2025 年 7 月 21 日

📱 Responsive Ad Loading for Baidu Union & Google AdSense (No Plugin Needed)

Problem: Responsive websites serve the same HTML/CSS to all devices—but ads often need device-specific adjustments. Here’s how to implement adaptive ads without plugins.

🧩 Method 1: PHP Detection (WordPress Only)

Use WordPress’ native wp_is_mobile():

<?php if ( wp_is_mobile() ) : ?>  
    <!-- Mobile ad code (e.g., 300x250) -->  
<?php else : ?>  
    <!-- Desktop ad code (e.g., 728x90) -->  
<?php endif; ?>

⚠️ Critical Limitations:

CDN Static Caching: Breaks detection (serves cached version to wrong devices).
Caching Plugins (WP Rocket/W3 Total Cache):
- Doubles cache storage (separate mobile/desktop versions).
- Increases server processing overhead.

🌐 Method 2: JavaScript Detection (Recommended)

Works universally, including static sites. Uses clientWidth for viewport detection.

Example 1: Load Baidu Ads Only on Desktop

<script>  
if (document.documentElement.clientWidth > 768) {  
  // Baidu desktop ad container & config  
  document.write('<div class="baidu-desktop-ad"></div>');  
  (window.slotbydup = window.slotbydup || []).push({  
    id: "u8888888",  
    container: "baidu-desktop-ad",  
    async: true  
  });  
}  
</script>  
<script src="//cpro.baidustatic.com/cpro/ui/c.js" async defer></script>

Example 2: Device-Specific Baidu Ads

<script>  
if (document.documentElement.clientWidth > 768) {  
  // Desktop ad  
  document.write('<div class="baidu-desktop-ad"></div>');  
  window.slotbydup.push({ id: "u8888888", container: "baidu-desktop-ad" });  
} else {  
  // Mobile ad  
  document.write('<div class="baidu-mobile-ad"></div>');  
  window.slotbydup.push({ id: "u9999999", container: "baidu-mobile-ad" });  
}  
</script>  
<script src="//cpro.baidustatic.com/cpro/ui/c.js" async defer></script>

Example 3: Baidu (Desktop) + AdSense (Mobile)

<script>  
if (document.documentElement.clientWidth > 768) {  
  // Baidu desktop ad  
  document.write('<div class="baidu-desktop-ad"></div>');  
  window.slotbydup.push({ id: "u8888888", container: "baidu-desktop-ad" });  
  document.write('<script src="//cpro.baidustatic.com/cpro/ui/c.js" async><\/script>');  
} else {  
  // Google AdSense responsive mobile ad  
  document.write('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXX" data-ad-slot="XXX" data-ad-format="auto" data-full-width-responsive="true"></ins>');  
  (adsbygoogle = window.adsbygoogle || []).push({});  
  document.write('<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');  
}  
</script>

✅ Tested Compatibility: Chrome, Firefox, Safari, Edge.

🚫 Why Hiding Ads via CSS is Dangerous

<div id="ad-container">Ad code here</div>  

<script>  
// ❌ Avoid this approach!  
if (document.documentElement.clientWidth < 768) {  
  document.getElementById("ad-container").style.display = "none";  
}  
</script>

Risks:

Wasted Bandwidth: Ads still load in background.
Policy Violations:
- Baidu/Google detect hidden ads as fraudulent.
- Risk of account suspension.
Slower Page Speed: Unnecessary resource consumption.

📊 Solution Comparison

Method	Pros	Cons/Notes
PHP Detection	Simple, clean code	WordPress only; fails with caching/CDN
JavaScript	Universal; cache-friendly	Requires manual ad ID/container setup
CSS Hiding	Technically easy	❗️Resource waste + policy risks

⚡ Key Implementation Tips

Threshold Adjustment:
Modify clientWidth > 768 to match your theme’s breakpoints.

Ad Container Styling:
Ensure containers are responsive:

.baidu-desktop-ad, .baidu-mobile-ad {  
  max-width: 100%;  
  overflow: hidden;  
}

AdSense Optimization:
Use data-full-width-responsive="true" for automatic mobile sizing.

✅ Why JavaScript Wins

CDN/Caching Safe: Runs client-side after cache delivery.
Universal: Works with WordPress, static sites, React/Vue.
Resource Efficient: Only loads ads for the target device.

Replace in examples:

baidu-desktop-ad → Your actual container class

u8888888 → Your Baidu ad slot ID

ca-pub-XXX → Your AdSense publisher ID

Implement this to serve compliant, device-targeted ads without plugins! 🚀

Blog