我重新设计了我的网站，并决定让它响应桌面-平板-智能手机。我的问题是 adenses 代码，因为我想根据屏幕尺寸在不同的地方展示不同类型的广告。
我的第一个想法是为每个设备创建 css 样式，并为我不想使用的设备使用 display:none 或 visibility:hidden。
像这样：
@media (min-width:992px) {
.desktop-only {
display:none;
}
}
这里的问题是，我将在台式机上展示 3 个广告，在平板电脑上展示 2 个广告，在智能手机上展示 1 个广告。 HTML 中的总代码为 6。从 Google 接受的 Adsense 的最大数量为 3。
使用display:none 或visibility:hidden 也会从源代码中删除它吗？在不使用 Google 的情况下执行此操作的最佳做法是什么？
【问题讨论】：
标签： javascript html css adsense
任何 CSS 属性都不能从网页源中移除广告。 两者之间的区别在于，“visibility:hidden”隐藏了元素，但它仍然保留了它在页面上的位置，而“display:none”则使其完全不可见，并且很可能不会被 Google 考虑（参见下面的示例）。
但是，我建议在加载页面后使用 javascript 动态加载广告。 您可以为广告准备占位符并使用您的 css @media 选择器显示/隐藏它们，因此您 将很容易识别要加载的内容。
function toggleVisible() {
var div1 = document.getElementById("div1");
if (div1.style.visibility == "hidden")
div1.style.visibility = "visible";
else
div1.style.visibility = "hidden";
}
function toggleDisplay() {
var div2 = document.getElementById("div1");
if (div2.style.display == "none")
div2.style.display = "";
else
div2.style.display = "none";
}div {
padding: 6px;
border: solid 1px gray;
}<div id='div1'>invisible element</div>
<div id='div2'>hidden element</div>
<p>Some text</p>
<input type=button value="toggle visible" onclick="toggleVisible()">
<input type=button value="toggle hidden" onclick="toggleDisplay()">更新
Google 机器人检查页面上实际存在的 DOM 元素的结构。它可能是一次简单的静态 HTML 加载的结果，也可能是执行六个脚本和二十次与服务器的 AJAX 行程的结果。无论如何，它只看到现有的元素，而不是其他情况下可能存在的元素。我建议的解决方案就是基于这个事实。
您准备一些占位符，而不是静态地将 Google 广告插入页面源：
<p>Page content...</p>
<div id="ad1" class="desktop-ad"></div>
<div id="m-ad1" class="mobile-ad"></div>
<p>Page content...</p>
<div id="ad2" class="desktop-ad"></div>
<p>Page content...</p>
<div id="ad3" class="desktop-ad"></div>
<p>Page content...</p>以及以下 CSS 类：
.desktop-ad {
display: inline;
}
.mobile-ad {
display: none;
}
@media only screen and (max-width: 480px) {
.desktop-ad {
display: none;
}
.mobile-ad {
display: inline;
}
}最后你在页面加载时运行代码，就像下面的伪代码一样：
function insertAds() {
var mobileAd = document.getElementById("m-ad1");
if (mobileAd.style.display == "none") {
// insert desktop ads
document.getElementById("ad1").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
document.getElementById("ad2").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
document.getElementById("ad3").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
}
else {
// insert mobile ads
document.getElementById("m-ad").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
}
}因此，Google 会在桌面设备上看到 3 个广告块或在移动设备上看到 1 个广告块，但不会看到全部 4 个广告块。
【讨论】：
现在 Adsense 提供响应式广告单元，它会根据屏幕尺寸/设备功能自动调整自身。不用你玩任何 CSS 技巧。
【讨论】：