Нужно решение JavaScript, чтобы полностью скрыть часть кода на разных устройствах экрана

Question

Я пытаюсь интегрировать этот раздел javascript с правильной шириной на мобильные, настольные и планшетные ПК, поэтому я написал это:

это появляется на мобильном телефоне (используя @media (min-width:...) в CSS)

<p align="center">News<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1050&amp;window=1"></script></p>

это появляется на планшете (используя @media (min-width:...) в CSS)

<p align="center">News<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1050&amp;window=1"></script></p>

это появляется на рабочем столе (используя @media (min-width:...) в CSS)

<p align="center">News<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1050&amp;window=1"></script></p>

Проблема связана с тем, что переменная "box" фактически читается браузером 3 раза, так как каждая часть кода для мобильных устройств, планшетов и ПК присутствует и доступна для чтения браузером, она получает значение последнего блока, которое устанавливает ширину в 250, что хорошо для мобильных устройств, но не для настольных компьютеров и планшетов, поэтому мне нужно что-то, чтобы показать единственную часть кода, которая динамически соответствует устройству каждый раз, как я могу это сделать?

Answer 1

Я решил написать это:

<script type="text/javascript">
  if(window.innerWidth>1024){
    document.write('\x3Cscript language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1024&amp;window=1"\x3C/script>');
  }else if(window.innerWidth>600){document.write('\x3Cscript language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=600&amp;window=1"\x3C/script>');}
  else{
  document.write('\x3Cscript language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=250&amp;window=1"\x3C/script>');}
  </script>

Answer 2

Пытаться:

var source_url, 
    script_element = document.createElement("script");

if(window.innerWidth > 1024) {
   script_element.src = "1024_script_source_url";
   console.log('loaded 1024 url, window width', window.innerWidth);
} else if (window.innerWidth > 600) {
   script_element.src = "600_script_source_url";
   console.log('loaded 1024 url, window width', window.innerWidth);
} 

document.head.append(script_element);

alert('done, window width' + window.innerWidth);

Вы, вероятно, захотите подписаться на событие изменения размера окна, чтобы...

window.onresize = function(event) {
//do something
};