在移动中查看桌面站点（使用的框架较少）

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