2014-04-24 52 views
0

我做了針對移動設備優化的樣式表爲使用客戶端站點:如何手動覆蓋CSS @media查詢?

<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css" /> 

這工作得很好,但他們要求的鏈接,將顯示其原始的,完整的頁面格式的網站。

有誰知道一種方法來重新加載網站並覆蓋上面的媒體查詢?是唯一的方法來做到這一點與JavaScript?

+1

要麼是這樣做,要麼是在渲染頁面時,如果頁面是動態生成的,則服務器根本不輸出移動樣式表。 – BoltClock

回答

0

就我個人而言,我贊成一個解決方案,樣式錶鏈接通過用戶選擇觸發的頁面後面的代碼中的某些邏輯有條件呈現。它不是那麼幹淨,但你也可以通過使用一些JavaScript來實現。也許沿着給予樣式表中的行鏈接一個id:

<link id="mobilestyles" rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css" />

然後調用一個函數從一個按鈕的事件處理程序禁用樣式表:

jQuery的

$("#mobilestyles").remove(); 

平原JS

document.mobilestyles[0].disabled = true; 

然後您可以存儲e用戶選擇爲cookie並記住這一點以供將來訪問。

+0

謝謝!我結束了使用道具:\t $('link [title = moboptcss]')。prop('disabled',true);並將其附加到單擊事件 – MeltingDog

+0

好東西:)很高興我可以幫幫我 –

0

僅當您有權訪問頁面渲染時纔可以使用鏈接。我認爲只使用簡單的鏈接,這是不可能的。您可以支持alternate styles。這使得用戶可以在他的瀏覽器中選擇想要的佈局。

編輯: 在「BoltClock」發現它可能缺乏移動瀏覽器支持後,您仍然可以使用它並通過javascript選擇樣式。但這是接近「梅洛特」

+1

是否有任何移動瀏覽器可讓您從一組替代樣式表中進行選擇? – BoltClock

+0

呵呵,你是對的。這是關於未使用的標準。我剛剛在我的android手機上試過鍍鉻。沒有支持。但即使在Windows鉻我找不到按鈕來改變風格。在Windows的Firefox(我更喜歡使用)有支持。 :, - ( –