如何屏蔽移动设备上的AdSense广告？Blogger站点广告显示控制咨询

我来给你几个靠谱的解决方案，帮你搞定移动端广告泛滥、影响阅读的问题，实现仅桌面端展示AdSense广告的效果：

这个方法最简单，不需要改广告脚本，直接通过CSS在小屏幕设备上隐藏广告元素：

1. 打开Blogger后台，进入「主题」→「自定义」→「高级」→「添加CSS」（或者直接编辑模板HTML，找到<style>标签插入代码）
2. 粘贴以下CSS：

/* 屏幕宽度小于768px时隐藏所有AdSense广告 */
@media (max-width: 767px) {
    .adsbygoogle {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
}

原理：用媒体查询匹配移动端常见的屏幕宽度（你可以根据需求调整767px这个数值），强制隐藏所有带adsbygoogle类的广告元素，确保不会占用页面空间。

这个方法更彻底——移动端根本不会加载AdSense的广告脚本和资源，既节省流量又避免广告渲染问题：

1. 打开Blogger模板编辑页面，找到你原来插入AdSense广告的位置
2. 替换原来的广告代码为以下代码（记得替换里面的广告客户端ID和广告位ID）：

<script>
// 判断是否为桌面设备（屏幕宽度≥768px）
if (window.innerWidth >= 768) {
    // 动态加载AdSense脚本
    const adScript = document.createElement('script');
    adScript.async = true;
    adScript.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    document.head.appendChild(adScript);

    // 创建并插入广告单元
    const adUnit = document.createElement('ins');
    adUnit.className = 'adsbygoogle';
    adUnit.style.display = 'block';
    // 替换成你自己的AdSense客户端ID
    adUnit.setAttribute('data-ad-client', 'ca-pub-XXXXXXXXXXXXXXXX');
    // 替换成你自己的广告位ID
    adUnit.setAttribute('data-ad-slot', 'YYYYYYYYYY');
    adUnit.setAttribute('data-ad-format', 'auto');
    adUnit.setAttribute('data-full-width-responsive', 'true');

    // 把广告插入到你需要的位置，比如页面顶部
    document.body.insertBefore(adUnit, document.body.firstChild);

    // 初始化广告
    (window.adsbygoogle = window.adsbygoogle || []).push({});
}
</script>

原理：先检测屏幕宽度，只有当宽度达到桌面级别的时候，才会加载广告脚本、创建广告单元并初始化，移动端完全跳过这个流程。

如果你熟悉Blogger模板的语法，可以用官方的条件标签判断是否为移动请求：

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
    <!-- 这里放你的完整AdSense广告代码 -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
         data-ad-slot="YYYYYYYYYY"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</b:if>

原理：通过Blogger的data:blog.isMobileRequest变量判断当前请求是否来自移动设备，只有非移动请求才会渲染广告。不过这个判断是基于请求头的，可能不如屏幕宽度检测精准（比如有些平板会被识别为桌面）。

你可以根据自己的技术熟悉程度选择合适的方法，个人更推荐方法2，既高效又彻底。

内容的提问来源于stack exchange，提问作者user3955406