Javascript 在屏幕上保持页面内容不变

我有一个网站有两个版本（台式机，手机）。我正在iPad mini上测试这两个版本；桌面版以横向显示，手机版以纵向显示。我有一个侧边导航链接，当点击时，隐藏和取消隐藏某些元素。加载页面时，它从“关于”部分开始。从那里，你可以点击定价和其他链接。当我旋转设备时，我用jQuery检查屏幕大小并加载适当的版本。但是，因为页面总是从“about”开始，所以无论您在哪个链接上，旋转都会使页面跳回“about”。有没有办法检测我看到的内容，并让旋转将这些内容保留在屏幕上？我有一个

链接活动

类附加到最近单击的链接。理想情况下，我正在寻找jQuery的答案

jQuery检查屏幕大小：

桌面（更改为移动）

使“关于”部分在加载时处于活动状态（HTML）：

关于
定价
项目
合法的
考虑使用媒体查询，而不是管理您的网站的单独的移动和桌面版本。请提供您当前正在使用的代码。@ ScTcMARCUS我确实考虑过使用媒体查询，但是我决定反对它，因为移动版本使用图标，我将桌面版本的左导航隐藏在菜单图标中，它从右侧移入，这两个版本有不同的功能。我发现维护不同的文件更容易。嗯，我真的不明白为什么媒体查询会被取消，因为你在移动版本中使用图标。这正是think Media Queries的目的。但是，您知道您可以将图像交换为图标，对吗？您不必隐藏一件事而显示另一件事，只需修改元素的源代码即可。
$(window).on('load resize', function(){
  if($(window).width() <= 768) {
    window.location = "q3m.html";
  }
});

$(window).on('load resize', function(){
  if($(window).width() > 768) {
    window.location = '/~kwilliam/Q';
  }
});

<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>