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

Question

I have used less framework for my site. 我为我的网站使用了较少的框架。 For mobile screen resolution, a button called 'View Full Site' has been provided. 对于移动屏幕分辨率，提供了一个名为“查看完整站点”的按钮。 When tapped, the desktop version of the site needs to be displayed. 点击时，需要显示该站点的桌面版本。 In short, the media query should be automatically changed to default. 简而言之，媒体查询应自动更改为默认值。 But I have no idea about how to do it. 但我不知道该怎么做。 I know it would have been easy if I would have simply made 2 separate versions - one for mobile and one for desktop. 我知道如果我简单地制作两个单独的版本会很容易 - 一个用于移动版，一个用于桌面版。 But I would like to know a way to get the desktop version using less framework. 但我想知道一种使用更少框架来获取桌面版本的方法。

Answer 1

One way to solve this is to set or remove a class on your <html> or <body> tag based on the user choice. 解决此问题的一种方法是根据用户选择在<html>或<body>标记上设置或删除类。

For example, by default you could have 例如，默认情况下您可以拥有

<html class="responsive">

Then, in your media query, prefix everything with this class 然后，在您的媒体查询中，使用此类为所有内容添加前缀

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

You could then set a cookie or some other form of persisted value for the user preference based on hitting the View full site button. 然后，您可以根据点击查看完整站点按钮为用户首选项设置cookie或其他形式的持久值。 Detect this value and use it to remove the responsive class from the document element, eg (in <head> ) 检测此值并使用它从文档元素中删除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