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

💡 尽管我们的横幅广告不是响应式的，但您可以根据设备轻松显示和隐藏不同尺寸的广告。下面是一个简单的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>

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

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

❗️不要忘记从您的个人区域插入横幅代码，而不是“您的移动代码片段”和“仅适用于桌面的代码片段”。

您可以使用任何安装方法：直接安装到 HTML（但不能安装到 <head> 部分）、通过添加小工具/小工具、自定义 HTML 元素等。

最佳组合是 728x90 和 320x50 横幅，但是，您可以选择任何您喜欢的组合。

检查是否有效

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

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