css - 使用 CSS 媒体查询时如何从移动网站恢复到桌面网站？

Question

我正在使用 CSS 媒体查询来创建响应式主题。我想在标有“转到桌面网站”的网站页脚添加一个链接。此链接将专门显示在移动设备上。我该如何做到这一点，以便当访问者单击桌面网站链接时，该网站加载了桌面媒体查询，而不是移动媒体查询。我希望我在我的问题上已经很清楚了。我在谷歌上搜索了解决方案，但找不到任何相关的东西。

Answer 1

您responsive.css使用以下方式卸载文件：

document.getElementsByTagName('link')[0].disabled = true;

例如，您可能有：

<link rel="stylesheet" href="base.css" type="text/css" id="css_base" />
<link rel="stylesheet" href="responsive.css" type="text/css" id="css_responsive" />

那么你可以拥有：

<a href="#" class="hidden-desktop" id="site_view">Show Full site</a>

$("#site_view").click(function() { 
   $("#css_responsive").prop("disabled", true); 
});

这是一个简单的示例：http: //jsbin.com/elukab/1（只需最小化浏览器窗口）

---

或者

您可以将用户重定向到您指定要关闭移动版本的新 URL ，例如：

$("#site_view").click(function() { 
   document.location = document.location.href + '?mobile=off';
});

并且使用您的动态语言，只需读取查询字符串而不加载响应式样式，因为我是 .NET 开发人员，我会这样做：

<link rel="stylesheet" href="base.css" id="css_base" />
@if(Request["mobile"] == null || Request["mobile"] != "off") {
    <link rel="stylesheet" href="responsive.css" id="css_responsive" />
}