Question

我最近为网站创建了一个单独的移动设备外观。该站点使用以下代码根据正在查看的设备的屏幕大小提供页面的移动版本。

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

我现在想添加一个＆＃34;查看桌面版本＆＃34;链接在页面底部。当然，使用每个页面标题中的上述代码，它只是再次检测屏幕大小并循环返回。

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

提前感谢任何建议。

Answer 1

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

var targetWidth = 980; 

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

有关详细说明，请参阅this链接。

Answer 2

要检测是否点击了链接，您可以：

添加一个特定的查询参数（例如？forceDesktop = true），如果返回移动设备应该删除
使用媒体查询和单一皮肤（请参阅bootstrap）
也许会寻找更精细的版本来检测移动版（.format method）
Chrome for Android可选择申请桌面版网站（link

Answer 3

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

因此，将网站桌面版本的代码更新为：

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>

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

如何创建桌面版本＆＃34;视图＆＃34;移动网站上的链接没有在结算时循环回移动版本？

3 个答案: