前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >禁止谷歌广告宽度超父元素的宽度,避免破坏移动网页样式

禁止谷歌广告宽度超父元素的宽度,避免破坏移动网页样式

作者头像
Yangsh888
发布于 2022-03-28 09:03:12
发布于 2022-03-28 09:03:12
80900
代码可运行
举报
文章被收录于专栏:Yangsh888的专栏Yangsh888的专栏
运行总次数:0
代码可运行

开通 谷歌广告联盟 Google AdSense 后,当访客使用手机访问时,谷歌自适应广告的宽度会展开为设备全宽,使得广告宽度超过了父元素的宽度,如下图所示:

我尝试添加自定义 CSS 来限定广告的宽度,但失败了,因为广告代码是JS脚本,广告的元素和样式在JS加载并执行之后才能确定,因此自定义 CSS 无法起到作用。经过搜索,我发现原来广告自动展开是谷歌刻意的行为。

我们可以修改广告代码,禁止自适应广告在移动设备上自动展开至全宽。只需在代码 <ins> 标签内添加为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
data-full-width-responsive="false"

如果广告代码中默认有此代码,就将代码中的 True 改为 false

修改过后会发现,广告已经不自动展开全宽,乖乖地呆在它应该在的地方:

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
禁止Google Adsense撑破父类 避免破坏手机网页样式
最近挖的坑有点多,金库有点捉襟见肘。三年的腾讯云眼看也要到期了,本来打算是卖点硬件实现自给自足,因为懒的原因,好像并不是很成功,(只是多了一堆板子和趁手的工具)所以给网站加了点GoogleAds。 但在投放广告后发现,当访客使用手机访问时,Adsense自适应广告的宽度会展开为设备全宽。也就是说,广告宽度超过了父元素的宽度,就像下图所示:
怪兽
2022/12/15
4320
禁止Google Adsense撑破父类 避免破坏手机网页样式
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使页面的能正常工作在各种各样的宿主环境当中。
Sb_Coco
2019/09/06
3.1K0
BootStrap初始
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
全栈程序员站长
2022/07/21
4.6K0
BootStrap初始
验证码前端性能分析及优化实践
在越来越注重用户体验的趋势下,验证码作为一种自打诞生以来就被贴上“多余”标签的产品,更应该给用户提供良好的体验。本文以滑动验证码作为切入点,分析了验证码可能存在的性能问题,并通过资源合并、DOM操作优化和选择性内联打包等方式有效减少页面加载时间。同时本文总结了移动端组件化适配容易遇到的问题,并提供了规范化的解决方案。希望本文能给前端做性能优化的同学提供一些不一样的实践思路。
腾讯防水墙
2018/08/21
3.2K5
Google AD广告投放样式太乱怎么办 谷歌广告样式设定 Google adsense谷歌广告调整宽度
备忘:先记录下谷歌广告的地址: https://www.google.com/adsense/new/u/ 我们使用谷歌广告代码后,往往会占用屏幕满屏,特别我们移动端的时候,那么就与我们自己网站设置的样式格格不入了。我们需要让他在我们设置的样式div内部,不让他跑出去。
梦溪
2021/12/09
9780
Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正
最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种广告样式的匹配度和对用户的吸引力以及延长访问者持续时间都让明月非常的喜欢,有兴趣了解的明月强烈建议大家看看谷歌官方的 简介 。可惜不知道为啥,在投放过程中发现了一个问题,那就是有时候会出现广告错位现象,主要表现就是广告超出了广告位的尺寸。
明月登楼
2018/08/28
8400
Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正
前端面试题归类-css
网页看着不方便,想要文档可以私聊我。要是有错别字和错误的地方,请各位大佬直接指出,谢谢啦!!
肥晨
2023/02/16
1.7K0
流量如何才能变现?实际测试谷歌广告联盟(Google Adsense)的广告效果以及如何优化相关代码
    CPC—英文全称CostPerClick;CostPerThousandClick-Through。CPC是一种点击付费广告,根据广告被点击的次数收费。如关键词广告一般采用这种定价模式,比较典型的有Google广告联盟和百度联盟。此类广告类型是目前大型广告联盟主推的合作方式,其展示的广告单价也随广告内容变化而改变。但此类广告也不太科学,广告虽然没被点击,但是却被浏览者实实在在的浏览了,广告价值已经产生,但却没有给我们网站主收入。
用户9127725
2022/08/08
3.3K0
流量如何才能变现?实际测试谷歌广告联盟(Google Adsense)的广告效果以及如何优化相关代码
优化谷歌联盟广告JS加载缓慢问题,提高网站页面的加载速度
早上跟彧繎博主聊天,看到他博客有一篇优化谷歌联盟js优化的文章,因为谷歌在国内尴尬的局面,在网页加载js的时候可能会比较拖拉,然后他又给我了一篇关于优化谷歌联盟js的文章,然后看了下自己网站的加载速度,果然谷歌js加载的速度真的很慢,加速最慢的已经达到了6.19s,另外两个十秒+应该是图片资源,可以暂时忽略。虽说我的网站打开速度不是很快,但是不能这么拖拉啊,是该整顿整顿啦,网站还有百度联盟的广告,但是速度不至于这么拖拉,而且百度的也该下架了,基本没有什么收益,广告太局限了,这一点来说真的不如谷歌,如图,看看吧,就是着速度,嗖嗖地。。。
李洋博客
2022/04/01
3.7K0
优化谷歌联盟广告JS加载缓慢问题,提高网站页面的加载速度
小白站长怎么优化谷歌(AdSense)广告联盟
首先本文不是教你怎么获取广告费的,今天也不谈谷歌广告联盟是怎么申请的,如果需要后期我可以专门写一篇google广告联盟申请教程,其次我要优化的并不是收益而是怎么避免踩坑、怎么避免一些擦边广告,因为谷歌的自动广告很好用,一段代码就搞得定,但毕竟都是谷歌是国外的,有一些广告并不适用我们国内,所以我们就不能去投放,可能有些人可能会说我老生常谈,有很多人写过的文章怎么还是翻来覆去的写呢?是的现在随便百度有很多类似的文章,但是我写文章主要是为了记录,博客本意即使记录自己生活学习的碎碎念,谁能保证百度那些网站会一直存在呢,说跑题了,emmm。。。
李洋博客
2021/09/09
1.1K0
Hexo Next 接入 google AdSense 广告
个人网站 www.yanlongwang.net 已经运营近一年,每日的浏览量不断上升,现在维持在两位数,打算承接一点广告赚睡后收入,用来维持网站的日常运营,希望能覆盖网站的服务器和域名开销。
waylon
2020/02/18
4.1K0
Hexo Next 接入 google AdSense 广告
应对冰桶算法的折腾再次领教了Adsense的强大!
百度最近的算法调整非常的频繁,特别是针对移动端的冰桶算法4.0的强势登场感觉影响更大,因为冰桶算法4.0主要是针对移动端广告位置、尺寸的,基本上可以理解为是打击移动端广告泛滥的,所有尺寸过大的以及对内容有遮挡的都会被降权,具体的大家可以看看图1、图2两张百度官方认为是标准正确的移动端广告范例来对比了解一下就明白了。
明月登楼的博客
2019/05/15
8620
应对冰桶算法的折腾再次领教了Adsense的强大!
开始着重体验 AdSense 的「链接广告」
细心的站长们可能发现明月的博客现在在文章标题下的广告位内容已经 PC 端和移动端都统一为谷歌 AdSense 的“链接广告”样式了,这样做的目的主要是为了提升广告跟内容的匹配度的,同时也根据用户特点专门选择的,毕竟明月的博客来访者几乎都是博客站长,对于图片、文字类广告的免疫度都很强悍,这势必会影响到点击率和浏览体验,所以最终明月还是感觉“链接广告”是最合适了。
明月登楼的博客
2019/05/15
8820
开始着重体验 AdSense 的「链接广告」
记录一次谷歌广告导致网站js加载不全的问题
之前网站第一次访问,与pjax加载后js图标不显示的问题一直困扰我,昨天无意间把谷歌广告(GoogleAdsense)下面这段单元广告js删掉之后惊奇的发现网站正常了,于是就开整了。
浩瀚博客
2022/03/23
1.4K0
记录一次谷歌广告导致网站js加载不全的问题
联系我们吧 - 12个联系我们表单和页面设计赏析和学习
设计网站时,关于我们页面和联系页面(contact us page)往往是必要页面之一。虽然只是一个简单的页面,但要真的能让用户有联系你的冲动还是很有挑战性。如果说,用户点击了联系页面,用户其实已经在尝试联系你了,这个时候,你需要提供的,不是花哨的设计,而是直观的联系方式,不阻碍用户尝试联系你的行为。但话又说回来,如果你有信心设计得美观,新颖,自然是最好,而且简洁也不意味着简单。今天我和大家分享12个联系我们表单和页面设计模板和例子,如果你喜欢,可以用在你的网页设计里哦。
奔跑的小鹿
2019/01/24
6.4K1
联系我们吧 - 12个联系我们表单和页面设计赏析和学习
HTML入门完全指南:从零开始构建你的第一个网页
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上写
IsLand1314
2025/03/08
2390
HTML入门完全指南:从零开始构建你的第一个网页
简单编写小程序的 CSS 样式教程
我们在完成了小程序的内容编辑后,就需要对样式骨架进行调节与调优,才能写出最符合用户体验的样式内容。
金牌打杂仔
2022/01/05
2.1K0
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
  很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益。   而更多的题目是我一路以来收集的,也有往年的,答案不确
Sb_Coco
2018/05/28
9160
Bootstrap实用手册
Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在 PC 浏览器中浏览,也可以在手机、平板中浏览,并且配合不同设备有不同的响应结果,响应式网页的特点:
越陌度阡
2020/11/26
6K0
前端框架与库 - Bootstrap响应式设计
在前端开发领域,Bootstrap无疑是最受欢迎的HTML、CSS和JS框架之一,它以其强大的组件库和响应式设计能力著称。响应式设计允许网页在不同设备和屏幕尺寸上都能提供优秀的用户体验。本文将深入探讨Bootstrap的响应式设计原理,常见问题,易错点以及如何避免它们,附带代码示例,帮助你更好地掌握Bootstrap的响应式特性。
Jimaks
2024/07/19
2320
推荐阅读
相关推荐
禁止Google Adsense撑破父类 避免破坏手机网页样式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验