如今大多数网页都采用响应式（自适应）布局，尤其是 WordPress 主题。然而这样的布局会带来一个问题：如何让广告也能随着设备类型进行动态加载？本文将详细介绍如何在页面中嵌入百度联盟或 Google AdSense 广告，并实现无插件广告自适应加载。
一、PHP 方法（仅限 WordPress）
WordPress 提供了 wp_is_mobile() 函数，用于判断访问者是否为移动设备，返回值为 boolean：
<?php if ( wp_is_mobile() ) : ?>
<!-- 移动设备广告代码 -->
<?php else : ?>
<!-- 桌面设备广告代码 -->
<?php endif; ?>这种方式非常简单，但存在以下缺陷：
- 仅适用于 WordPress 网站。
- 使用 CDN 静态缓存时检测失效。
- 使用 WP Rocket、W3 Total Cache 等缓存插件时，为移动和桌面分别建缓存会重复占用资源，还会增加处理开销。
那有哪些更优雅的方案呢？请继续往下翻。
二、JavaScript 方法（推荐）
这种方法不限于 WordPress，可用于任意网页，兼容性更高。以下为多个常见示例：
示例 1：桌面加载百度联盟广告，移动则不加载
<script>
if (document.documentElement.clientWidth > 768) {
document.writeln('<div class="_30bsg7808bf"></div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u8888888",
container: "_30bsg7808bf",
async: true
});
}
</script>
<script src=" async defer></script>示例 2：桌面显示固定尺寸广告，移动显示百度联盟的移动广告
<script>
if (document.documentElement.clientWidth > 768) {
document.writeln('<div class="_30bsg7808bf"></div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u8888888",
container: "_30bsg7808bf",
async: true
});
} else {
document.writeln('<div class="_5absc18f9d6"></div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u9999999",
container: "_5absc18f9d6",
async: true
});
}
</script>
<script src=" async defer></script>示例 3：桌面加载百度联盟广告，移动加载 Google AdSense 自适应广告
<script>
if (document.documentElement.clientWidth > 768) {
document.writeln('<div class="_30bsg7808bf"></div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u8888888",
container: "_30bsg7808bf",
async: true
});
document.writeln('<script src=" async defer><\/script>');
} else {
document.writeln('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub‑4026513110826579" data-ad-slot="7266153905" data-ad-format="auto" data-full-width-responsive="true"></ins>');
document.writeln('<script async src="
}
</script>所有示例代码均通过测试，兼容 Edge、Firefox、Chromium、WebKit 等主流浏览器，基于 document.documentElement.clientWidth 获取可视区域宽度。Google AdSense 广告代码实施优化可参考实用指南。
三、为什么不推荐使用 CSS 隐藏法
有些人通过 CSS 将广告元素 display:none 隐藏起来，但这样实际广告资源可能仍被加载，影响页面速度，甚至可能导致百度联盟认为存在违规投放行为，例如：
<script>
function zzb_ads_none(){
document.getElementById("_30bsg7808bf").style.display="none";
}
if (document.documentElement.clientWidth < 768) {
zzb_ads_none();
}
</script>问题在于广告代码依然执行，资源被加载但未显示，不仅浪费带宽，还可能触发平台违规检测。
✅ 小结与建议
| 方法 | 优势 | 劣势或注意事项 |
|---|---|---|
| PHP 判断 | 易于实现、代码简洁 | 仅限 WordPress，缓存环境下失效 |
| JS 动态加载 | 通用性强、适配所有平台、无需额外插件 | 需自行配置广告 ID 和容器 CSS |
| 隐藏元素法 | 实现简单 | 资源浪费、可能违规，不推荐 |
- 推荐方案：JavaScript 动态加载，它支持 CDN 缓存、纯前端页面、WordPress 等多种场景。
- 请将示例中的广告 ID、容器 class 替换为你实际使用的内容，并根据实际需求调整宽度阈值（示例为 768px）。