您是否可以根据视口大小制作条件语句来使用或不使用某些JavaScript？

Question

我想知道是否有人可以使用这个HTML,CSS,Javascript拼图？

我正在使用@media视口CSS声明来检测移动屏幕大小,这会缩小我的网站移动访问者,纯粹使用CSS这很好,因为我只有1个网站要更新,而不是2.到目前为止很好......: )

但是,在我的HTML中有一行引用Javascrit文件的代码,这使得这对主导航链接(例如)具有非常好的"软滚动"效果.

这一切都适用于网站的正常版本,但由于某些未知原因,它会在网站的缩小版本上完全停止导航.如果我删除这个链接到js/softscroll.js文件,那么缩小网站上的链接工作正常,我可以在迷你版本上失去这个效果,但随后...主要网站导航停止!:<我必须对主站点btw有此效果.

所以,我的问题是......

...有没有办法在HTML或JavaScript(JS我想象!)中制作某种条件语句,它会告诉浏览器只使用那个JavaScript(js/softscroll.js)......如果......访问者只能查看正常的站点,并且...显然忽略了js/softscroll.js文件,如果正在访问该站点的移动版本？

Whoaw!我希望你明白我到底发生了什么!？哈!你可能想知道我想在这里实现什么,或者为什么我对这种javascript效果感兴趣？很长一段时间,但我只想说我正在制作一个疯狂的侧滚网站,这一点至关重要!:0)

所以,是吗？欢迎任何帮助!谢谢你的时间!

Answer 1

您可以使用jQuery有条件地加载脚本:

http://api.jquery.com/jQuery.getScript/

if(mainsite) $.getScript('js/softscroll.js');

UPDATE

首先,当你需要Javascript时,你真的需要jQuery.最好下载并将其放在您的网站上 - http://jquery.org

但这是一种可能现在可行的方法:

在你的应用程序的head部分:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

接下来,您需要一种方法来了解移动设备是否正在访问您的网站:

<script>
    var platform = navigator.platform.toLowerCase();
    var mobile = platform.match(/(iphone|ipod|ipad|android)/);

然后,您需要有条件地加载您的特殊脚本:

    if(!mobile) $.getScript('js/softscroll.js');
</script>

这六行代码添加到您网站的主管部分,现在可能会这样做:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
    var platform = navigator.platform.toLowerCase();
    var mobile = platform.match(/(iphone|ipod|ipad|android)/);
    if(!mobile) $.getScript('js/softscroll.js');
</script>