可以禁用@media 查询或强制解决吗？原因：允许 iphone 查看桌面站点？
Posted
技术标签:
【中文标题】可以禁用@media 查询或强制解决吗？原因：允许 iphone 查看桌面站点？【英文标题】：Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site? 【发布时间】：2013-03-01 14:29:00 【问题描述】：我通过@media 查询对我的网站进行了重大修改，以在手机上显示非常精简。但是，我的用户要求提供该站点的桌面版本（可通过链接获得）。
更进一步，桌面网站本身也会被@media 查询修改，具体取决于分辨率。我正在考虑选择一种“桌面”分辨率，比如 1440x900 并强制手机以该分辨率显示？
这可能吗，也许是通过 javascript？或者，可以完全禁用这些@media 查询吗？
谢谢！
【问题讨论】：
您需要禁用包含这些规则的样式表，而不是单独禁用这些规则。 【参考方案1】：将任何可能需要禁用的样式放在自己的样式表中是最简单的方法，并带有标题属性，以便更轻松地找到它们。它们可以是内联样式或链接到 .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;
【讨论】：
【参考方案2】：我会给你的<html> 或<body> 添加一个类，例如class="force-desktop"，然后在你的媒体选择器上添加
@media ()
body:not(.force-desktop)
//styles
或类似的东西
【讨论】：
@romo 你怎么能做同样的事情，但对于强制移动？因为桌面将被应用，但移动仅在媒体查询命中时应用，但我想使用类名force-mobile 来点击移动视图
不确定您的意思，但这是一个旧答案。对于特定样式，您仍然可以使用 .force-mobile 和 body.force-mobile。
使用 romo 的答案，你也可以反过来。您可以在正文中添加一个类，例如“响应式”。然后，在媒体查询中，使用“body.responsive.YourSelector”（如果它在正文上）或“body.responsive YourSelector”（使用空格而不是句点，是正文的后代）。然后，您可以通过删除正文中的“响应”类来禁用所有媒体查询。
?这将是如何在 IE10+11 中处理这个问题，因为它们不支持 :not()【参考方案3】：
我与客户有同样的问题。但问题是有 120 多个 CSS 文件包含媒体查询。所以我所做的是，设置视口宽度。我在那个网站上使用了这个 sn-p 并且工作正常。使用它，您甚至可以为用户提供在响应式设计和非响应式设计之间切换的选项。
$(document).ready(function()
$('meta[name="viewport"]').prop('content', 'width=1440');
);
注意：1440 是您首选的屏幕宽度。
希望这会有所帮助:)
【讨论】：
我根本无法完成这项工作。你能解释更多吗？这是我尝试此解决方案的演示。 plnkr.co/edit/qWEImTg5VB63BD1EL4FW?p=preview 点击按钮将视口宽度更改为 1000，文本应更改。 这个答案可能对试图在移动设备上强制使用桌面网站（如问题所问）但不能反过来（强制移动设备在桌面上，甚至桌面在桌面上）的开发人员有帮助桌面）。这是因为桌面浏览器不尊重 标签，它只被移动浏览器看到。对于这种情况，Romo 的解决方案更好。 我喜欢这个。我使用 SASS 并且我的样式到处都是零散的，而且手机上的人不太可能关闭 JS，所以这应该很可爱。 非常有用的评论@patr1ck。我认为，这个问题需要修改这个问题。 @rtindru 你必须将“桌面浏览器”切换到“移动视图”【参考方案4】：没有JQuery的IJas的解决方案是这样的：
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);
【讨论】：
以上是关于可以禁用@media 查询或强制解决吗？原因：允许 iphone 查看桌面站点？的主要内容，如果未能解决你的问题，请参考以下文章