Html 可以禁用@media 查询或强制解决吗？原因：允许iphone查看桌面站点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15388967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
提问by Mark
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).
我通过@media 查询对我的网站进行了大量修改，以在手机上显示非常精简。但是，我的用户要求提供该站点的桌面版本（可通过链接获得）。
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?
更进一步，桌面站点本身也会根据分辨率通过@media 查询进行修改。我正在考虑选择一个“桌面”分辨率，比如 1440x900 并强制手机以该分辨率显示？
Is this possible, maybe through JavaScript? Alternatively, can these @media queries be disabled altogether?
这可能吗，也许是通过 JavaScript？或者，可以完全禁用这些@media 查询吗？
Thanks!
谢谢！
回答by Ijas Ameenudeen
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.
我和一个客户有同样的问题。但问题是有 120 多个 CSS 文件包含媒体查询。所以我所做的是，设置视口宽度。我在那个网站上使用了这个片段并且工作正常。使用它，您甚至可以为用户提供在响应式设计和非响应式设计之间切换的选项。
$(document).ready(function(){
$('meta[name="viewport"]').prop('content', 'width=1440');
});
Note: 1440 is your preferred screen width.
注意：1440 是您首选的屏幕宽度。
Hope this helps :)
希望这可以帮助 ：）
回答by romo
I would add a class to your <html>or <body>such as class="force-desktop"and then on your media selector add
我会添加一个类到您的<html>或<body>诸如class="force-desktop"，然后在您的媒体选择器上添加
@media () {
body:not(.force-desktop) {
//styles
}
}
or something similar
或类似的东西
回答by Nils Langner
The solution of IJas without JQuery looks like:
没有 JQuery 的 IJas 的解决方案如下所示：
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
回答by kennebec
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.
将任何可能需要禁用的样式放在它们自己的样式表中是最容易的，使用标题属性可以更容易地找到它们。它们可以是内联样式或链接元素到 .css 文件。
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;
}
}
