Question

我想在我的网站上添加广告。但广告公司没有提供响应式解决方案。

我得到的只是两个用于PC和移动设备的脚本资源。

web

728*90
<script src="http://xxx_728_90&ad_type=banner"></script> 

mobiles

320*50
<script src="http://xxx_320_50&ad_type=banner"></script>

如果我有两个版本的电脑和移动设备，但我只有一个版本，那就没关系了。我的问题是如何根据屏幕尺寸更改广告脚本来源。

Answer 1

您不一定要将脚本实现为HTML。你可以编写脚本脚本！

要执行此操作，您需要一种机制来决定您是在台式机还是移动设备上运行。为简单起见，我将使用screen对象，其中包含有关物理设备的有用数据。这种方法有点天真，考虑使用viewport并监听resize事件来响应窗口大小的变化（如果库可以容忍重新加载）。

const isDesktop = screen.width > 700;
const script = document.createElement('script');
script.src = 'http://xxx_' + (isDesktop ? '728_90' : '320_50') + '&ad_type=banner';
document.body.appendChild(script);

Answer 2

最后我找到了解决方案。

<script src="http://media.krxd.net/derek/postscribe.js"></script>
<div class="container">
<div id="ad"></div>
 <script>

 // jQuery used as an example of delaying until load.
  $(function() { 
     if ( $(window).width() > 739) {      
  //Add your javascript for large screens here 
  var str='728_90';
} 
else {
  //Add your javascript for small screens here 
  var str='320_100';
}
    // Build url params and make the ad call
    postscribe('#ad', '<script src=xxx'+str+'&ad_type=banner><\/script>');
  });

</script>
</div>

如何根据屏幕宽度更改javascript广告源

2 个答案: