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

【问题标题】：View desktop site in mobile (less framework used)在移动设备中查看桌面网站（使用较少的框架）
【发布时间】：2013-10-23 05:02:27
【问题描述】：

我为我的网站使用的框架较少。对于移动屏幕分辨率，提供了一个名为“查看完整站点”的按钮。点击时，需要显示该站点的桌面版本。简而言之，媒体查询应该自动更改为默认值。但我不知道该怎么做。我知道如果我只制作 2 个单独的版本 - 一个用于移动设备，一个用于桌面设备，那会很容易。但我想知道一种使用更少框架获得桌面版本的方法。

【问题讨论】：

标签： php css mobile

【解决方案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>

【讨论】：