• • 已解决**：这对我来说很好，修复了移动设备底部的Google AdSense。
• • 超文本标记语言**

<div class="main_ad">
<div class="mobileadunit">
    <!-- Put Code Given By Google Adsense -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXX"
            crossorigin="anonymous"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:320px;height:50px"
         data-ad-client="ca-pub-XXXXXXXXXXX"
         data-ad-slot="XXXXXXXXXXX"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
</div>

• • 中央支助组**

.main_ad{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 101;
  display: block;
}

.mobileadunit {
  display: none;
  margin:0px auto;
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
  .mobileadunit {
    width:320px;
    height:50px!important;
    bottom:0;
    display:block!important;
    z-index: 1;
  }
}

• • 排序中**

<div class="main_ad">
   <div class="mobileadunit">
    ADSENSE CODE
   </div>
</div>

事实证明，css“@media queries”本身可能无法提供您想要的结果或最佳用户体验。
首先，我不是Maven，但我更像是一个初学者。无论如何，就目前而言，谷歌的AdSense广告似乎是固定大小的，在不同的设备上观看时，不适应不同的屏幕宽度。在较小的设备上，当浏览响应网站时，AdSense广告会扩展到容器之外，而且经常会扩展到屏幕之外--破坏布局，降低用户体验。甚至阻止移动的访问者点击你的广告。

那么，有什么变通办法吗？

是的，如果你在网上搜索，你会发现一些解决方案，包括谷歌的官方建议，改变AdSense代码。我已经通过这个问题一次，经过真正快速的研究，我知道2个非常好的插件，显示在响应WordPress网站的AdSense广告。见Google AdSense for Responsive Design Plugin（免费选项）和Easy Responsive AdSense Plugin（付费选项）以及。
如前所述，Google Adsense program's policies涵盖了他们自己的方法和指令更改Adsense代码，虽然他们接受的修改准则是相当直接和强烈建议，只要一个不修改Adsense代码的方式是有害的程序，那么谷歌不接受轻微修改Adsense代码，而不适用于任何处罚用户的帐户。
无论是否使用插件，javascript + css媒体查询都是根据你的问题获得更好的预期结果的最佳方法。如果你不想依赖插件，你可以按照下面的步骤让它与一些css和js一起工作。

解决方案：

因此，基于前面提到的插件解决方案，我构建了一个快速的demonstration（实时测试网站），以便您可以在移动的上访问/测试它。演示网站显示AdSense移动横幅（320 × 50 px），以及具有不同尺寸格式的其它广告单元，通过借助于媒体查询检测它们的屏幕尺寸，仅在普通移动设备上显示，然后用一个非常简单的javascript指令/告诉谷歌选择最佳的广告大小在页面加载时显示。
请记住，此代码在页面首次加载时会做出响应，但不会对窗口大小或设备方向的任何后续更改做出响应。浏览演示网站时，请考虑在每次窗口大小更改时刷新页面。
此外，您也可以在CODEPEN上使用它，但请记住，为了使它工作，您应该将AdSense客户端编号和广告位编号替换为您自己的. Here's a few screenshots，它在iOS 7移动的Safari iPhone 5上工作。
我们把它分成几部分：

首先，让我们设置HTML标记：

AdSense移动的横幅和其他不同大小的广告单元将根据**<div>withid="responsive-adsense“的当前宽度进行渲染，该宽度位于<div>withid="adcontainer"**内，而我们将使用该宽度来定位横幅，使其始终固定在底部。

<div class="adcontainer">

<div id="responsive-adsense">
<!-- AdSense javascript goes here -->
</div>

</div>

然后立即嵌入AdSense javascript：

在这里，我已经注解掉了好的提示。

<div class="adcontainer">
<div id="responsive-adsense">

 <script type="text/javascript">
  // Replace google_ad_client number with ith your AdSense Publisher ID
  google_ad_client = "ca-pub-928637890363315";
  // Detect and calculate the width of the "<div>" where AdSense ads will be rendered
  var containerWidth = document.getElementById( "responsive-adsense" ).offsetWidth;
  // If ad container is 728px...
   if ( containerWidth >= 728 ) {
  //...Then, display Adsense ad of size 728x90px
  // Remember to replace the AdSense Ad Slot ID as well for all the different size ad units
  google_ad_slot = "2385224440";
  google_ad_width = 728;
  google_ad_height = 90;
    }
  // If ad container is 468px, then display Adsense ad of size 468x60px
   else if ( containerWidth >= 468 ) {
  google_ad_slot = "1350406442";
  google_ad_width = 468;
  google_ad_height = 60;
   }
  // If ad container is 320px, then display Adsense ad of size 320x50px
   else if ( containerWidth >= 320 ) {
  // It is even possible to set a different google_ad_client ID only for your mobile traffic
  google_ad_client = "ca-pub-928637849363315";
  google_ad_slot = "1350806442";
  google_ad_width = 320;
  google_ad_height = 50;
   }
  // If ad container is 234px, then display Adsense ad of size 234x60px
   else if ( containerWidth >= 234 ) {
  google_ad_slot = "2825039647";
  google_ad_width = 234;
  google_ad_height = 60;
   }
</script>

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

</div>
</div>

上面的javascript代码涵盖了4个特定的广告单元。谷歌建议不要为了在同一页面上显示3个以上的广告单元而修改AdSense代码。因此，建议在一个单独页面中只设置3个广告单元。只要我们根据设备的屏幕大小在一个单独页面中只显示1个广告，我们就可以开始了。请务必花些时间阅读Google'的AdSense策略here。
我们用上面的javascript代码覆盖了4个不同大小的广告单元，如下所示：

• 234 x 60 -半横幅
• 320 x 50 -移动的横幅
• 468 x 60 -横幅
• 728 x 90 -排行榜

现在，借助css进行媒体查询，我们将锁定最常见的小屏幕尺寸

我们将介绍一种扩展方法，在下面的css媒体查询的帮助下，在各种屏幕尺寸上显示AdSense广告，这反过来又会针对大多数移动的设备，如智能手机和平板电脑。我们在这里没有严格针对任何特定的移动设备，因此，您可以随时建立自己的定位方案或简单地坚持与Adsense移动的横幅（320 x50）部分的代码只，因为它是显示在这种方法...
根据你的问题，你不想在桌面浏览器上显示这个，所以我们会开始设置display: none;的一切时，在桌面上浏览网站。

/* Default Stylesheet */

#responsive-adsense {
  display: none; 
}

#responsive-adsense{
  display: none;
} 

/*
GENERAL MEDIA QUERY FOR SMALL SCREEN SIZES - COVERS COMMON MOBILE DEVICES, PHONES/TABLETS...
*/

@media only screen and (max-width: 1023px) {

.adcontainer {
  display: none; 
}

#responsive-adsense{
  display: none;
} 

}

@media only screen and (max-width: 899px) {

.adcontainer {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0px;
  display: block;
  background: #e74c3c;
  color: #fff;
  margin: 0 auto;
  padding: 5px;
 }

#responsive-adsense {
  width: 728px !important;
  display: block !important;
}

}

@media only screen and (max-width: 767px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 728px !important;
 display: block !important; 
}

}

@media only screen and (max-width: 599px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 468px !important;
 display: block !important; 
}

}

@media only screen and (max-width: 479px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 320px !important;
 display: block !important;
} 

}

/* Here's the css for mobile devices */  
@media only screen and (max-width: 320px) {

.adcontainer {
 width: auto !important; 
 padding: 0px !important;
 height: 50px !important; 
}

#responsive-adsense {
 width: 320px !important;
 display: block !important; 
}

}

最后但同样重要的是，您可以始终遵循谷歌的响应方式在您的网站上设置Adsense广告，并作出自己的更改，只要你不违反他们的政策禁止的任何条款。https://support.google.com/adsense/answer/1354736?hl=en&topic=1271508

这可能不是最好的解决方案，但即使谷歌指出，他们的尝试还不是完美的，并接受您自己的修改时，你认为这是必要的，再次，任何修改AdSense代码应始终符合谷歌Adsense的政策的良好做法。

其他参考文献：

下面的文章指出了两种不同的方法，以正确的方式显示AdSense广告在响应网站。这里的答案大多来自这些来源，也是谷歌的官方建议。
看看吧，它可能真的对你的需求很有帮助：
http://www.labnol.org/internet/google-adsense-responsive-design/25252/
http://www.akshitsethi.me/google-adsense-responsive-ads-explained/
我希望这对你和社区里的其他一些人有帮助。任何改进都是受欢迎的。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .mobileadunit {
      width:320px;
      height:50px;
      position:fixed;
      bottom:0px;
      display:block;
  }
}

所以我切换了媒体查询，使其使用min/max-width而不是min/max-device-width，这样它就可以在计算机屏幕上工作，但下面是它工作的一个jsfidle：
http://jsfiddle.net/hm3Cj/
这是一篇很棒的文章，介绍了最小/最大宽度和最小/最大设备宽度之间的区别：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml（如果你感兴趣的话）。而且它有所有常见的设备/屏幕尺寸。目前你正在使用的是一个相当小的空间显示。320 x 480可能是一个更有用的比例为移动的电话。