首页 / PHP / php – 页脚中的浮动/固定div

php – 页脚中的浮动/固定div

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了php – 页脚中的浮动/固定div，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7485字，纯文字阅读大概需要11分钟。

内容图文

我有一个wordpress网站,我想在页面的最底部向移动用户显示1个Google Adsense横幅广告(320px x 50px).当我在页面底部说我应该说可视屏幕的底部,所以无论用户在页面的哪个位置,它总是可见的.

我已经知道我需要使用媒体查询,我发现使用该网站的主要移动设备的大小是320px或360px宽.

我为此写的css并放在标准的style.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
&LT / DIV&GT

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

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

非常感谢

解决方法:

事实证明,单独使用css“@media queries”可能无法提供结果,也无法提供最佳用户体验.

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

那么,还有什么办法吗？

是的,如果您在网上搜索,您会找到一些解决方案,包括Google关于更改AdSense代码的官方建议.我已经经历过一次这个问题,经过一次非常快速的研究,我了解了2个非常好的插件,可以在响应式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一起使用.

解决方案：

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

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

此外,您也可以在CODEPEN使用它,但请记住,为了使其正常工作,您应该用自己的号码替换AdSense客户端号码和广告位号码. Here’s a few screenshots它在iOS 7手机游戏iPhone 5上工作.

所以让我们把它分成几部分：

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

AdSense移动横幅广告和其他尺寸不同的广告单元将根据< div>的当前宽度进行呈现.在< div>内使用id =“responsive-adsense” 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广告,而这反过来又针对大多数移动设备,如智能手机和平板电脑.我们并未严格按照此处的任何特定移动设备进行操作,因此,您始终可以构建自己的定位方案,或者只使用Adsense Mobile横幅(320×50)部分代码,因为这种方法显示了…

根据你的问题,你不想在桌面浏览器上显示它,所以我们首先设置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代码的任何修改都应该始终符合优惠Google Adsense政策的做法.

其他参考：

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

看看它,它可能真的有助于您的需求：

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

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

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

内容总结

以上是互联网集市为您收集整理的php – 页脚中的浮动/固定div全部内容，希望文章能够帮你解决php – 页脚中的浮动/固定div所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/793205.html

来源：【匿名】