页脚中的浮动/固定div

时间：2014-03-07 22:36:06

标签： php html css wordpress

我有一个wordpress网站，我想在页面的最底部向移动用户显示1个Google Adsense横幅广告（320px x 50px）。当我说在页面底部时，我应该说可视屏幕的底部，所以无论用户在页面的哪个位置，它都始终可见。

我已经知道我需要使用媒体查询，并且我已经发现使用该网站的主要移动设备的大小为320px或360px宽。

我为此编写并放在标准style.css文件中的CSS是; 

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

}`

然后我将div放在wordpress上的footer.php文件中，就在标记

之前

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

但尽管我付出了最大的努力，但我还是无法表现出来。我做错了什么，这显然是显而易见的吗？

我不是编码员，但我喜欢学习它，所以如果有人可以告诉我哪里出错了，如果有任何不好的做法，我会非常感激。

非常感谢

2 个答案:

答案 0 :(得分：2)

@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，这样它就可以在计算机屏幕上工作，但是这里有一个工作的jsfiddle：< / p>

http://jsfiddle.net/hm3Cj/

对于最小/最大宽度和最小/最大设备宽度之间的区别，这是一篇很棒的文章：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml（如果您感兴趣的话。）它还有所有常见的设备/屏幕尺寸。您正在使用的当前空间显示的空间相当小.320 x 480对于手机来说可能是一个更有用的比例。

答案 1 :(得分：2)

事实证明，css＆＃34; @media查询＆＃34;单独可能不会提供结果，也不会提供最佳用户体验。

首先，我不是专家，而是更多的学习者。无论如何，就目前而言，Google的AdSense广告似乎是固定尺寸，并且在不同设备上观看时不适应不同的屏幕宽度。在较小的设备上，当浏览响应式网站时，AdSense广告会在其容器外扩展，并且经常会偏离屏幕 - 打破布局，降低用户体验，甚至阻止移动访问者点击您的广告。

那么，是否有任何解决方法？

是的，如果您在网上搜索，您会找到一些解决方案，包括Google关于更改AdSense代码的官方建议。我曾经遇到过这个问题，经过一次非常快速的研究，我知道了两个非常好的插件，可以在响应式WordPress网站上展示AdSense广告。请参阅Google AdSense for Responsive Design Plugin（免费选项）和Easy Responsive AdSense Plugin（付费选项）。

如前所述，Google Adsense program's policies涵盖了他们自己的方法和指令，用于更改Adsense代码，虽然他们接受的修改指南非常简单且强烈推荐，只要不修改Adsense代码在某种程度上它对程序有害，那么Google确实接受对Adsense代码的轻微修改，而不对用户的帐户进行任何处罚。

通过使用或不使用插件，javascript + css媒体查询将是根据您的问题获得预期结果的更好体验的最佳方法。如果您不想依赖插件，可以按照以下步骤使其与几个css和js一起使用。

解决方案：

因此，基于前面提到的插件＆＃39;解决方案，我已经建立了一个快速demonstration（实时测试网站），因此您可以在手机上访问/测试它。演示网站仅在手机上显示AdSense移动横幅广告（320x50px），以及仅在普通移动设备上使用不同尺寸格式的其他广告单元，通过媒体查询检测其屏幕尺寸，然后使用非常简单的javascript指示/告知Google选择在加载页面时显示的最佳广告尺寸。

请注意，此代码在首次加载页面时会响应，但对窗口大小或设备方向的任何后续更改都不会响应。浏览演示网站时，请考虑每次更改窗口大小时刷新页面。

此外，您也可以在CODEPEN上使用它，但请记住，为了使其正常运行，您应该将AdSense客户端号码和广告位号码替换为您自己的号码。 Here's a few screenshots它在iOS 7移动游戏iPhone 5上工作。

所以让我们分成几块：

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

AdSense移动横幅广告和其他尺寸不同的广告单元将根据 <div> 的当前宽度与 id="responsive-adsense＆＃34;呈现 <div> id="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个特定的广告单元。 Google建议您不要修改AdSense代码，以便在同一页面上显示3个以上的广告单元，因此建议您在唯一的网页中仅设置3个广告单元。只要我们根据设备的屏幕尺寸在唯一页面中仅显示1个广告，我们就可以了。请务必花一些时间阅读Google的AdSense政策here。

我们使用上面的javascript代码覆盖4个不同大小的广告单元，如下所示：

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

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

我们将采用一种扩展方法，通过下面的css媒体查询帮助在各种屏幕尺寸上展示AdSense广告，而css媒体查询又针对大多数移动设备，如智能手机和平板电脑。我们并未严格按照此处的任何特定移动设备进行操作，因此，您始终可以构建自己的定位方案，或者仅使用Adsense Mobile横幅（320x50）部分代码，就像此方法所示。 ..

根据您的问题，您不希望在桌面浏览器上显示此内容，因此我们首先在桌面浏览网站时为所有内容设置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; 
}

}

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

这对您来说可能不是最好的解决方案，但即使Google指出他们的尝试还不完善，并且在您认为必要的时候和地点接受您自己的修改，同样，对AdSense代码的任何修改都应始终符合与谷歌Adsense政策的良好实践。

其他参考资料：

以下文章指出了两种不同的方法，以便以正确的方式在响应式网站上展示AdSense广告。这里回答的大部分内容都源于这些来源以及谷歌的官方建议。

检查出来，它可能对您的需求非常有帮助：

http://www.labnol.org/internet/google-adsense-responsive-design/25252/

http://www.akshitsethi.me/google-adsense-responsive-ads-explained/

我希望这可以帮助您和社区中的其他一些人。欢迎任何改进。

相关问题
最新问题