根据屏幕大小禁用javascript

Disable javascript based on screen size

本文关键字：javascript 屏幕      更新时间：2024-04-11

好吧，这可能不可能，但我认为是的，我对此完全陌生，所以我尝试的可能显然不起作用，但当时我不知道。我的网站是移动响应的，没有单独的移动网站网页，所以单独将代码放入页面也不起作用。

iv'e尝试过：

<style>
@media screen and (max-width: 720px) {
#div {
display:none;
  }
}
</style>
<div id="div">
<script type="text/javascript"> 
  var adfly_id = ID; 
  var popunder_frequency_delay = 0; 
</script> 
<script src="https://cdn.adf.ly/js/display.js"></script>
</div>

这不起作用。Ive在这里的某个地方看到了这个代码

if(screen.width < 720) { 
    // do any 720 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}

但我不知道该如何将adfly代码放入其中。

编辑：

感谢那些回复的人，iv'e得到了它Praveen Kumar的答案，而奇怪的是，它仍然在桌面上加载广告，无论分辨率如何，它在手机上都非常完美。。。Siguza我之前会给你的，这样人们就会知道，以备将来参考。我会再次编辑。。。

编辑II:

为了将来参考，Siguza的方法也很有效，所以如果其他人偶然发现了这一点，那么你可以拍下你的照片，看看该用谁。此外，Praveen Kumar方法也适用于最短的广告，对于任何可能使用它们而不是adfly的人来说，下面是我使用的。

<script type="text/javascript">
if(screen.width < 720) { 
  var adfly_id = null; 
  var popunder_frequency_delay = null;
} else {
  // do all your cool stuff here for larger screens
    var adfly_id = ID; 
    var popunder_frequency_delay = 0;
}
      </script>
<script src="https://cdn.adf.ly/js/display.js"></script>
<script type="text/javascript">
if(screen.width < 720) { 
//screens bigger than 720
} else {
//shortest advertisement code                        
}
</script>

替换此行：

<script src="https://cdn.adf.ly/js/display.js"></script>

这个：

<script>
if(screen.width >= 720) {
    document.head.appendChild(document.createElement('script')).src = 'https://cdn.adf.ly/js/display.js';
}
</script>

这只需创建一个<script>标记，将其src属性设置为https://cdn.adf.ly/js/display.js，然后将其添加到文档的<head>标记中
只使用JavaScript而不是纯HTML。

请注意，我在这里依赖HTML5，但您的问题也是如此（<script>和<style>不需要type属性）。

编辑：

这种方法在使用document.write的脚本上似乎失败了（IMO认为这是一种糟糕的做法）
你可以通过自己使用document.write来解决这个问题：

<script>
/* you can put your adfly_id code right here */
if(screen.width >= 720) {
    document.write('<script src="https://cdn.adf.ly/js/display.js"><'+'/script>');
}
</script>

请注意，必须拆分字符串中的</script>标记，否则它将关闭周围的脚本标记，从而导致语法错误。

可能是一个黑客作业。如果只有当你有一个有效的adfly_id时，这才有效，那么就这样做：

if(screen.width < 720) { 
  var adfly_id = null; 
  var popunder_frequency_delay = null;
} else {
  // do all your cool stuff here for larger screens
  var adfly_id = ID; 
  var popunder_frequency_delay = 0; 
}

这可能会使您尝试初始化的adfly内容失败。

但正确的方法是：

if(screen.width < 720) { 
  // Bye bye.
} else {
  // do all your cool stuff here for larger screens
  require("awesome.js");
}

ps：这里的require()函数是一个伪函数，它将包括并激活JavaScript文件。该代码的示例是：

function loadScript(url, callback) {
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;
    // Fire the loading
    head.appendChild(script);
}
相关文章：