Having a button that views 'non-mobile layout' with media queries? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 8 years ago.

Improve this question

When creating a 'responsive' website with Media Queries, how do I go about having a button to view 'full'/desktop version of the layout? For example:

mobile wikipedia desktop wikipedia

I can see that they are obviously using an M subdomain, which isn't what I am after. I just want to be able to click a link and make the website think the browser isn't mobile-width until a cookie expires or whatever.

I thought about possibly removing the css file with js, and loading in another one?

How do you solve this

Answer 1

Javascript could be an option here- using something like:

function getURLParameter(name){
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
};
var version=getURLParameter('version');


var headHTML = document.getElementsByTagName('head')[0].innerHTML;

switch(version){
    case 'mobile':
        headHTML    += '<link type="text/css" rel="stylesheet" href="style.css" media="only screen and (max-device-width: 480px)">';
    break;
    case 'desktop':
        headHTML    += '<link type="text/css" rel="stylesheet" href="style.css" media="only screen and (max-device-width: 1040px)">';
    break;
    default:
        headHTML    += '<link type="text/css" rel="stylesheet" href="style.css" >';
    break;
}

version && document.getElementsByTagName('head')[0].innerHTML = headHTML;

The links to various versions would then append the GET variable version=desktop etc and only the relevant CSS would be loaded.

Clearly- change the media property in the stylesheet inclusion as appropriate.

Answer 2

A most common solution is to provide the site on 2 subdomains. One which have the mobile or responsive layout and one which uses the non-responsive full desktop layout.

Answer 3

Which server side language do you use?

With python and django we use https://pypi.python.org/pypi/django-mobile.

We ask the flavor in the view code and send a different template.