CODEWITHSUNDEEP
phpcssmobile
Chetana Kestikar
Chetana Kestikar

Reputation: 570

View desktop site in mobile (less framework used)

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.

Upvotes: 3

Views: 209

Answers (1)

Phil
Phil

Reputation: 164776

One way to solve this is to set or remove a class on your <html> or <body> tag based on the user choice.

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. Detect this value and use it to remove the responsive class from the document element, eg (in <head>)

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

Upvotes: 2

Related Questions