2012-02-26 28 views
0

網站有關移動和標準視圖之間是在這裏:來回切換的CSS/PHP的styleswitcher

http://autisticadovcacy.uniongraphics.org

我最初設計爲默認,打印和移動樣式此使用一個CSS文件,使用 @media print@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)來區分這些樣式。

我也有單獨的樣式表爲幾個可訪問性相關的修改(類型大小增加,對比度變化)。我正在使用PHP styleswitcher腳本來允許用戶手動切換這些樣式。我鏈接到styleswitcher在標題是這樣的:

<link rel="stylesheet" href="/wp-content/themes/asan/css/switcher.php?default=style.css" type="text/css" /> 

和定義默認風格style.css

這一切都正常工作,直到客戶說他們想提供一種方式讓用戶切換回移動設備的默認佈局。我想我會將所有的移動樣式放到單獨的樣式表中,在頭文件中添加一個額外的鏈接以使用與之前相同的媒體查詢加載樣式表,然後在頁腳中添加樣式切換鏈接以允許用戶如果願意切換回主樣式表。

但是,當我刪除了我的手機款式的主要樣式表和加載主樣式表後添加在頭這一行:

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="/wp-content/themes/asan/css/mobile.css" /> 

...移動樣式不再來了最後的級聯莫名其妙。正在加載mobile.css文件,但只顯示標記爲重要的樣式;其他一切都默認爲主樣式表。

我想,也許這是因爲移動樣式正在加載styleswitcher腳本之外,所以我試圖

<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="/wp-content/themes/asan/css/switcher.php?default=mobile.css" /> 

但這並不工作。

任何人都可以找到我的錯誤,我/ /或建議一個更好的方式來允許用戶在標準和移動視圖之間切換(短的創建一個完全獨立的移動網站和使用重定向, m希望避免)?

回答

0

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