0

我正在尝试在移动设备、台式机和平板电脑上以正确的宽度集成这个 javascript 部分，所以我写了这个：

这出现在移动设备上（在 css 中使用 @media (min-width:...)）

<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>

这出现在平板电脑上（在 css 中使用 @media (min-width:...) ）

<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>

这出现在桌面上（在 css 中使用 @media (min-width:...) ）

<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>

问题是由于浏览器实际读取了 3 次的变量“box”，因为移动设备、平板电脑和 pc 的代码的每个部分都存在并且浏览器可以读取，它获取最后一个将宽度设置为的框值250 适用于移动设备，但不适用于台式机和平板电脑，所以我需要一些东西来显示每次动态适合设备的代码的唯一部分，我该怎么办？

4

2 回答 2

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>

于 2018-11-19T17:56:39.727 回答
0

尝试：

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
};
于 2018-11-19T15:01:23.777 回答