2015-04-23 57 views
0

我最近爲網站創建了一個單獨的移動皮膚。該網站使用以下代碼根據正在查看的設備的屏幕大小提供頁面的移動版本。如何在移動網站上創建一個「查看桌面版本」鏈接,而無需在返回到移動版本時解除鏈接?

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

我現在想在頁面底部添加一個「查看桌面版本」鏈接。自然地,通過上面的代碼在每個頁面的標題中,它只是再次檢測屏幕大小並返回。

有人可以請建議我如何解決這個問題。我懷疑這將是一個會話或cookie,但我對java很陌生,不知道如何設置它們。

在此先感謝您的任何建議。

回答

0

這應該由您的網站的元標記中的視口來處理。在使用jQuery的可以讓用戶選擇退出響應式設計的:

var targetWidth = 980; 

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

this鏈接更多的澄清。

0

要檢測鏈接被點擊,您可以:

  • 添加特定的查詢參數(如forceDesktop =真的嗎?)如果返回移動
  • 使用媒體查詢和單皮膚應刪除(見引導)
  • 也許尋找更詳細的版本來檢測移動(link
  • Android版Chrome擁有選項來請求桌面網站(How to request desktop
0

我設法想出了另一種使用本地存儲的解決方案,對於像我這樣的初學者來說,這非常簡單。這可能是一種業餘的做事方式,但它的確適用於我的目的。

所以更新的代碼對網站的桌面版:

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> 

正如我說,也許不是最好的方式,但它肯定有效,對初學者很容易。

相關問題