在移動中查看桌面站點（使用的框架較少）

Question

我為我的網站使用了較少的框架。 對於移動屏幕分辨率，提供了一個名為“查看完整站點”的按鈕。 點擊時，需要顯示該站點的桌面版本。 簡而言之，媒體查詢應自動更改為默認值。 但我不知道該怎么做。 我知道如果我簡單地制作兩個單獨的版本會很容易 - 一個用於移動版，一個用於桌面版。 但我想知道一種使用更少框架來獲取桌面版本的方法。

Answer 1

解決此問題的一種方法是根據用戶選擇在<html>或<body>標記上設置或刪除類。

例如，默認情況下您可以擁有

<html class="responsive">

然后，在您的媒體查詢中，使用此類為所有內容添加前綴

@media (max-width: 767px) {
    // using LESS syntax here, otherwise, prefix each selector with .responsive
    .responsive {
        // all your CSS for small screens
    }
}

然后，您可以根據點擊查看完整站點按鈕為用戶首選項設置cookie或其他形式的持久值。 檢測此值並使用它從文檔元素中刪除responsive類，例如（在<head> ）

<script>
    if (full_site_requested) {
        document.documentElement.className = document.documentElement.className.replace('responsive', '');
    }
</script>

在移動中查看桌面站點（使用的框架較少）

問題描述

1 個解決方案

解決方案1
2 已采納 2013-10-23 05:16:00

在移動中查看桌面站點（使用的框架較少）

問題描述

1 個解決方案

解決方案1 2 已采納 2013-10-23 05:16:00

解決方案1
2 已采納 2013-10-23 05:16:00