如何在移动网站上创建一个“查看桌面版本”链接，而无需在返回到移动版本时解除链接？

我最近为网站创建了一个单独的移动皮肤。该网站使用以下代码根据正在查看的设备的屏幕大小提供页面的移动版本。如何在移动网站上创建一个“查看桌面版本”链接，而无需在返回到移动版本时解除链接？

<script type="text/javascript"> 
    if (screen.width <= 600) { 
    window.location = "mobile/"; 
    } 
</script>

我现在想在页面底部添加一个“查看桌面版本”链接。自然地，通过上面的代码在每个页面的标题中，它只是再次检测屏幕大小并返回。

有人可以请建议我如何解决这个问题。我怀疑这将是一个会话或cookie，但我对java很陌生，不知道如何设置它们。

在此先感谢您的任何建议。

来源

2015-04-23 JamieNexus

这应该由您的网站的元标记中的视口来处理。在使用jQuery的可以让用户选择退出响应式设计的：

var targetWidth = 980; 

$('#view-full').bind('click', function(){ 
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth); 
});

见this链接更多的澄清。

来源

2015-04-23 08:49:04

要检测链接被点击，您可以：

添加特定的查询参数（如forceDesktop =真的吗？）如果返回移动
使用媒体查询和单皮肤应删除（见引导）
也许寻找更详细的版本来检测移动（link）
Android版Chrome拥有选项来请求桌面网站（How to request desktop

来源

2015-04-23 08:54:13

我设法想出了另一种使用本地存储的解决方案，对于像我这样的初学者来说，这非常简单。这可能是一种业余的做事方式，但它的确适用于我的目的。

所以更新的代码对网站的桌面版：

var GetDesk = 0; 
var GetDesk = localStorage.getItem('GetDesk'); 

//check screen size is less than 600 
if (screen.width <= 600) { 

//check if there's anything in local storage showing the users requested the desktop 
      if (GetDesk == 0) {  
       window.location = "/mobile.html"; 
      } 
      }

然后添加代码到网站的移动版本，查看用户是否先前请求桌面版：

var GetDesk = localStorage.getItem('GetDesk'); 
    if (GetDesk == 1) { 
     window.location = "/desktop.html"; 
    }

在的移动版本底部

然后添加的按钮：

<!-- onclick set the value of GetDesk to 1 and redirect user to desktop site --> 
<button onclick="localStorage.setItem('GetDesk','1'); window.location.href = '/desktop.html';">View desktop</button>

正如我说，也许不是最好的方式，但它肯定有效，对初学者很容易。

来源

2015-04-23 11:46:58 JamieNexus

如何在移动网站上创建一个“查看桌面版本”链接，而无需在返回到移动版本时解除链接？

回答

相关问题