在移动设备和桌面上显示不同的横幅广告

💡 尽管我们的横幅广告不是响应式的，但您可以根据设备轻松显示和隐藏不同尺寸的广告。下面是一个简单的CSS技巧来实现这个功能。

首先，您需要将 CSS 添加到页面的 <head> 中：

<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>

在这段代码中，我们声明如果一个元素的类是.mobileShow，它只会在移动设备上显示，而.mobileHide则只在桌面设备上可见。

接下来，只需将<div>元素和Adsterra广告代码添加到页面的主体部分：

<div class="mobileShow"> Your code snippet for mobile </div>

<div class="mobileHide"> Code snippet for desktop only </div>

例如，您可以在728 x 90和320 x 50的横幅广告之间进行切换。

以下是在常规HTML页面中的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />

<title>Hello World!</title>

<meta name="robots" content="index,follow" />
<meta property="og:title" content="Hello World!" />

<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />


<style type="text/css">
.mobileShow {display: none;}

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ 
.mobileShow {display: inline;}
}
.mobileHide { display: inline; }

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>
</head>
<body>
<!-- the wrapper and content divs set margins and positioning -->
<div class="wrapper">
<div class="content" role="main">
<!-- this is the start of content for our page -->
<h1 class="title">Hello World!</h1>

</div>
<div class="mobileShow">
<script type="text/javascript">
atOptions = {
'key' : '0303d891ce479628509ef2972f7239d6',
'format' : 'iframe',
'height' : 300,
'width' : 160,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/0303d891ce479628509ef2972f7239d6/invoke.js"></scr' + 'ipt>');
</script> </div> 
<div class="mobileHide"> <script type="text/javascript">
atOptions = {
'key' : 'd6744e6de34f83085d99817829bdfc87',
'format' : 'iframe',
'height' : 90,
'width' : 728,
'params' : {}
};
document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/d6744e6de34f83085d99817829bdfc87/invoke.js"></scr' + 'ipt>');
</script></div>
</div>

</body>
</html>

https://mobile-desktop-adsterra.glitch.me/

WordPress

这个方法也适用于WordPress网站。首先，你需要将CSS类添加到CSS文件中：

进入WordPress管理后台，导航到"外观"（Appearance）并选择"主题编辑器"（Theme Editor）
在主题编辑器中，找到右侧的"样式表"（Stylesheet）文件
滚动到文件底部并插入以下CSS代码：

.mobileShow {display: none;}

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ 
.mobileShow {display: inline;}
}
.mobileHide { display: inline; }

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { d

4. 点击"更新文件"（Update file）按钮以保存更改。

接下来，在WordPress中的任何页面主体部分添加HTML元素和Adsterra代码片段：

<div class="mobileShow">
<script type="text/javascript">
your adsterra code for mobile
</div> 
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>

下面是header.php文件的示例：

Blogger

您基於Blogger的網站也將支援此功能。就像WordPress一樣，首先添加您的CSS：

從左側菜單中導航到「佈景主題」
點擊「自訂」旁邊的下拉按鈕，選擇「編輯HTML」
將CSS代碼粘貼到<head>標籤中：

<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>

4. 在右上角点击保存。

现在您可以在任何地方使用这两个类。例如，在页头显示不同的横幅广告：

从左侧菜单进入「布局」
点击「添加小工具」，从列表中选择「HTML/JavaScript」
插入以下代码和您的广告代码片段：

<div class="mobileShow">
<script type="text/javascript">
your adsterra code for mobile
 </div> 
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>

4. 在右下角点击保存。

检查是否生效

Chrome开发者工具可以让您查看网站在不同设备上的外观。

打开您的网站，在页面的任意位置右键点击，选择“检查元素”；Chrome开发者工具面板将打开
在面板右上角点击“切换设备工具栏”
从下拉菜单中选择移动设备