使用 jquery 从移动设备切换到桌面设备答案

【问题标题】：Switch from Mobile to Desktop using jquery使用 jquery 从移动设备切换到桌面设备
【发布时间】：2014-01-28 14:32:51
【问题描述】：

我正在使用此代码将用户从桌面版本引导到我的移动网站。

if (screen.width < 480) {
    document.location = "Path of Mobile Page"
}

我想为用户提供从移动网站切换回桌面版本的选项（可能使用“查看桌面版本”的锚点），但此代码会将他们重定向回移动网站。我想知道在用户单击锚点后是否可以使 url 留在桌面页面。我对 jquery 的了解有限，因此将不胜感激。

我想我是新人，所以我无法把我的问题说清楚，所以我再次解释一下。

我有两个单独的页面，index.html 和 index1.html，用户只知道 index.html。在移动设备上查看 index.html 时，它会重定向到 index1.html（因此检测移动设备不是问题）。现在 index1.html 中有一个具有 href="index.html" 的链接，但是，当我单击此链接时，index.html 检测到它是移动设备并再次将其重定向回 index1.html。这是我要避免的，一旦用户单击锚点查看 index.html，它不应该重定向回 index1.html。当用户第一次键入 index.html 时，我使用上述代码将其重定向到 index1.html

谢谢

【问题讨论】：

移动端和桌面端的jquery版本完全不同，我相信你需要为移动端和桌面版本维护不同的代码
为什么不开始使用响应式婚礼设计
客户要求 :(

标签： jquery html

【解决方案1】：

您只需使用 userAgent 即可做到这一点。

 function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i))   {
    return true;
  }
 else {
    return false;
  }
}

如果窗口的分辨率为 800x600 或更低，则它是移动设备。要执行此操作，您可以执行以下操作。

function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
 return true;
   } else {
     return false;
   }
}

参考：Detect mobile device

谢谢，

【讨论】：

【解决方案2】：

由于您将有两个不同的路径，只需在您的移动页面上添加一个按钮即可将用户重定向到桌面页面。顺便说一句，您可以检查导航器而不是屏幕宽度来确定要显示的默认页面。

【讨论】：

当用户单击该按钮时，它会被重定向，但是当页面加载时 jquery 再次被触发，并且再次显示移动页面。这就是问题所在.. :(

【解决方案3】：

您可能想查看以下关于如何检测移动浏览器的主题：

What is the best way to detect a handheld device in jQuery?

如果您不进行整页重定向，您可能需要传递如下 URL 参数：

document.location = path + "index.html?mode=desktop";

并检查该值以检测用户是否“手动选择”移动/桌面站点：

How to Get Url Parameters & Values using jQuery

【讨论】：