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

问题

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!

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

回答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

回答3:

The solution of IJas without JQuery looks like:

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

回答4:

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;
  }  
}

来源：https://stackoverflow.com/questions/15388967/possible-to-disable-media-queries-or-force-a-resolution-reason-allow-an-iphon

标签

javascript

html

css

css3

media-queries