Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?

javascript html css media-queries

28,617

Solution 1

I had the same issue with a client. But the problem was there were 120+ CSS files contained the media queries. So what I did is, set the viewport width. I have used this snippet on that site and working fine. Using this, even you can give the option for the users to toggle between responsive design and non-responsive design.

$(document).ready(function(){
   $('meta[name="viewport"]').prop('content', 'width=1440');
});

Note: 1440 is your preferred screen width.

Hope this helps :)

Solution 2

I would add a class to your <html> or <body> such as class="force-desktop" and then on your media selector add

@media () {
    body:not(.force-desktop) {
        //styles
    }
}

or something similar

Solution 3

The solution of IJas without JQuery looks like:

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);

28,617

Author by

Mark

Updated on January 23, 2020

Comments

Mark over 4 years

I have my site HEAVILY modified via @media queries to display very slimdown'd on mobile phones. However, my users are asking for the desktop version of the site (available via a link).

To go a step further, the desktop site itself also gets modified by @media queries depending on resolution. I was thinking of picking one 'desktop' resolution, say 1440x900 and forcing the mobile phone to display at that resolution?

Is this possible, maybe through JavaScript? Alternatively, can these @media queries be disabled altogether?

Thanks!
m59 over 10 years

I can't make this work at all. Can you explain more about it? Here is the demo in which I'm attempting this solution. plnkr.co/edit/qWEImTg5VB63BD1EL4FW?p=preview Clicking the button changes the viewport width to 1000 and the text should change.
patr1ck over 10 years

This answer may be helpful for devs who are trying to force a desktop site on mobile (like the question asks) but doesn't work the other way around (forcing mobile on desktop, or even desktop on desktop). This is because desktop browsers don't respect the <meta name="viewport"> tag, it's only seen by mobile browsers. For that case, Romo's solution is better.
Alex McCabe over 9 years

I like this. I use SASS and have my styles fragmented all over the place, and it's highly unlikely that someone on a mobile will have JS turned off, so this should be lovely.
Mustafa Ehsan Alokozay over 8 years

Very useful comment @patr1ck. I think, the question needs to be modified with this issue.
Basit about 7 years

@romo how can you do same, but for force-mobile? since desktop will be apply, but mobile only gets applied when media query hits, but I want to hit the mobile view with a class name force-mobile
romo about 7 years

Not sure what you mean, but this is an old answer. You could still do .force-mobile and body.force-mobile for specific styles.
rtindru almost 7 years

Doesn't work for me either - same as @m59. What is his plunkr demo missing?
BGBRUNO over 6 years

@rtindru you have to switch "desktop browser" to "mobile view"
rtindru over 6 years

Thanks @BGBruno for the tip! Yup, just reducing the window size on Chrome doesn't do the trick. You need to go into the mobile view :)
George Beier over 5 years

Using romo's answer, you could also go the other way around. You could add a class to the body e.g. "responsive". Then, in the media queries, use "body.responsive.YourSelector" (if it's on the body) or "body.responsive YourSelector" (using a space instead of a period, a descendant of the body). Then you could disable all of the media queries by just removing the "responsive" class in the body.
Harry B almost 3 years

👆This would be how to handle this in IE10+11 as they don't support :not()