中，这是我们将始终固定在底部放置横幅的容器。
<div class="adcontainer">
<div id="responsive-adsense">
<!
</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 ) {
google_ad_slot = "2385224440";
google_ad_width = 728;
google_ad_height = 90;
}
else if ( containerWidth >= 468 ) {
google_ad_slot = "1350406442";
google_ad_width = 468;
google_ad_height = 60;
}
else if ( containerWidth >= 320 ) {
google_ad_client = "ca-pub-928637849363315";
google_ad_slot = "1350806442";
google_ad_width = 320;
google_ad_height = 50;
}
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个特定的广告单元。谷歌建议不要修改AdSense代码以在同一页面上显示超过3个广告单元，因此建议仅在唯一页面中设置3个广告单元。只要根据设备屏幕大小在唯一页面中显示1个广告，我们就可以开始了。请花些时间阅读Google的AdSense政策
here。
我们使用上面的javascript代码覆盖了4个具有不同尺寸的广告单元，如下所示：
- 234 x 60 - 半横幅
- 320 x 50 - 移动横幅
- 468 x 60 - 横幅
- 728 x 90 - 排版广告
现在，借助媒体查询的css帮助，我们将针对最常见的小屏幕尺寸进行目标定位。
我们将介绍一种扩展方法，通过下面的CSS媒体查询来显示AdSense广告以适应各种屏幕大小，从而针对大多数移动设备，如智能手机和平板电脑。我们在这里并不严格针对任何特定的移动设备，因此您可以始终构建自己的定位方案，或者仅使用Adsense Mobile横幅（320x50）代码部分，就像在这种方法中所示的那样...
根据您的问题，您不想在桌面浏览器上显示它，因此当在桌面上浏览网站时，我们会首先设置
display: none;为所有内容。
#responsive-adsense {
display: none;
}
#responsive-adsense{
display: none;
}
@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;
}
}
@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代码的任何修改都应符合Google Adsense政策的良好实践。
其他参考资料：
以下文章介绍了两种不同的方法，以正确地在响应式网站上显示AdSense广告。本回答的大部分内容均来自这些来源，以及谷歌的官方建议。
请查看，它可能非常有用：
http://www.labnol.org/internet/google-adsense-responsive-design/25252/
http://www.akshitsethi.me/google-adsense-responsive-ads-explained/
我希望这能帮助你和社区中的其他人。欢迎提出任何改进意见。
