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

前端未结

关注

 4  618

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

相关标签:

4条回答

忘了有多久

2020-11-30 01:50
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
隐瞒了意图╮

2020-11-30 01:52
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 :)
0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2020-11-30 01:59
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;
  }  
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
谎友^

2020-11-30 02:06
The solution of IJas without JQuery looks like:
```
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...