2012-02-27 20 views
1

可能重複:
Switching back and forth between mobile and standard views with css/php styleswitcher如何允許用戶從移動設備切換回標準視圖(CSS)

如果我有我的一個樣式表的所有樣式,使用@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)定義移動樣式,有沒有辦法讓用戶切換回標準視圖,即使他們從移動設備上查看網站?

我嘗試將我的移動樣式放在一張單獨的工作表中並使用樣式切換器腳本,但我無法使其工作。有沒有辦法用一個樣式表來做到這一點?

回答

1

對於任何其他人處理這個問題 - 我使用的設備主題切換WP插件:https://github.com/jamesmehorter/device-theme-switcher/。該插件允許您爲掌上電腦和平板電腦定義單獨的主題,並使用用戶代理檢測功能將訪問者發送到適當的主題,但也可以讓您在移動版式中包含「查看完整網站」鏈接,以便用戶可以返回到標準視圖他們要。

0

「解決辦法」使用多個樣式表:

你可以用JavaScript函數,使用innerHTML編輯標題創建一個按鈕。

因此,您可以使用按鈕上的onclick來執行包含innerHTML的JavaScript函數,以切出設備特定的樣式表加載並將其替換爲僅適用於計算機的樣式表。

這意味着您再次需要三張樣式表。一種僅用於移動樣式,一種僅用於桌面樣式,另一種用於常用樣式。

<link href="stylesMobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 480px)"> 
<link href="stylesDesktop.css" rel="stylesheet" type="text/css" media="screen and (min-width: 480px)"> 
<link href="stylesCommon.css" rel="stylesheet" type="text/css" media="screen"> 

切出的第1和第2行,並用「stylesDesktop.css」與媒體=「屏幕」

我希望這有助於簡單裝載替換它們。 PS:我想不出用戶友好的方式來「覆蓋」@media屬性。出於測試目的,我假設僞造用戶代理應該工作。

相關問題