javascript - 如何在移动网站上创建 "Desktop Version"链接而不重定向到移动网站

Question

所以，我以前见过这个问题，但没有真正的答案(除非我错过了)。

我使用它重定向到 site.com 上的移动网站

      if (screen.width <= 800) {
      window.location = "/m";
      }

以及简单的 HTML 来重定向到 m.site.com 上的桌面版本

     <a href="../"> Desktop Version </a>

但是，当然，由于上面的 if 语句，它会重定向到移动版本。

如何使用 JavaScript 来解决这个问题？

谢谢。

Answer 1

本地存储已得到广泛支持，所以让我们使用它吧。无需为 cookie 烦恼。

如果我们在点击移动网站上显示的“桌面版本”链接时执行类似的操作:

localStorage.setItem("forceToDesktop", "true")
// Followed by redirect to desktop with JS

我们修改屏幕宽度检查以包括对上述值的检查:

if (localStorage.forceToDesktop !== "true" && screen.width <= 800) {
    // Do redirect stuff
}

如果forceToDesktop值未设置，并且屏幕宽度小于或等于800，这将显示移动网站。

然而，这个谜题仍然有一部分缺失。在选择仅查看桌面网站后，移动用户如何返回移动网站？

我们需要以某种方式删除forceToDesktop值。我会做这样的事情。

if (localStorage.forceToDesktop === "true" && screen.width <= 800) {
    // Add a link to the page called something like "view mobile site",
    // and have it run the below javascript function on click
    var backToMobile = function () {
        localStorage.removeItem("forceToDesktop");
        // Redirect back to the mobile version of the page, 
        // or just redirect back to this page, and let the normal 
        // mobile redirect do its thing.
    }
}