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

Asked 13/3, 2013 at 15:4 Answered 7/7, 2016 at 14:49

Solved javascript html css media-queries

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!

Kado answered 13/3, 2013 at 15:4 Comment(1)

You will need to disable the stylesheet that contains these rules rather than disable the rules individually. – Heaviside 13/3, 2013 at 15:6

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 :)

Mcquade answered 22/11, 2013 at 5:21 Comment(7)

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. – Exhale 26/1, 2014 at 23:47

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. – Homogeny 19/2, 2014 at 18:15

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. – Satisfaction 20/1, 2015 at 11:24

Very useful comment @patr1ck. I think, the question needs to be modified with this issue. – Consort 25/11, 2015 at 6:41

Doesn't work for me either - same as @m59. What is his plunkr demo missing? – Nix 27/9, 2017 at 9:24

@Nix you have to switch "desktop browser" to "mobile view" – Calendula 22/1, 2018 at 15:6

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 :) – Nix 23/1, 2018 at 11:23

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

Calender answered 13/3, 2013 at 17:43 Comment(5)

@Calender 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 – Jewfish 9/5, 2017 at 21:6

Not sure what you mean, but this is an old answer. You could still do .force-mobile and body.force-mobile for specific styles. – Calender 11/5, 2017 at 16:59

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. – Beckon 13/2, 2019 at 16:43

👆This would be how to handle this in IE10+11 as they don't support :not() – Suckle 6/8, 2021 at 8:17

This assumes control of the media query definitions. Would be nice if there were some viewport meta equivalent for desktop to be able to disable query styling without editing the css itself. – Coating 18/1, 2023 at 16:54

The solution of IJas without JQuery looks like:

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

Delftware answered 7/7, 2016 at 14:49 Comment(0)

Its easiest to put any styles that may need to be disabled in their own stylesheets, with title attributes to make finding them easier. They can be inline style or link elements to .css files.

function toggleSheet(title){
  var S=document.styleSheets, L=S.length, temp;
  while(L){
    temp=S[--L];
    if(temp.title===title){
    temp.disabled=!temp.disabled;
    return temp;
  }  
}

Frumpy answered 13/3, 2013 at 17:3 Comment(0)

Recommended topics

Hot tags