javascript - 如何使导航 HREF 根据浏览器大小不同地加载链接

Question

更新:我假设一个更好的描述方法是我希望链接根据屏幕大小加载不同的页面，因此如果在桌面上单击时加载 page1.html，如果在移动设备上单击时加载 page2.html。

所以我对这个一头雾水，我的网站上有一个导航栏，上面有“论坛”这个词，当你点击论坛时，它会加载一个 lytebox 并在其中加载论坛，现在这对笔记本电脑来说很棒或台式机，但在手机上加载效果不佳，所以我想知道的是...是否可以添加任何脚本，说明如果用户使用的是手机或较小的屏幕分辨率，它会打开链接作为新页面而不是使用 lytebox。

我将在下面添加我的导航代码，这样您就可以看到当前的设置。

<div class="nav-collapse collapse pull-right">
    <ul class="nav" id="top-navigation">
        <li class="active"><a href="index.html">home</a>    </li>
        <li><a href="#" id="showRight">TS Viewer</a></li>
        <li><a href="#price">Servers</a></li>
        <li><a href="squad.html">Members</a></li>
        <li><a href="http://www.myforum.com/example" rel="lyteframe" title="IRU" rev="width:100%; height:100%; scrolling: no;">Forum</a></li>
        <li><a href="#donate">Donate</a></li>
        <li><a href="#contact">Contact</a></li>   
    </ul>
</div>

Answer 1

$("#nav a").click(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || $(window).width()<=768){
        //mobile
    }
    else{
        //pc
    }
});