Question

我正在使用CSS媒体查询来创建响应主题。我想在标题为“转到桌面网站”的网站页面添加一个链接。此链接将专门显示在移动设备上。我怎么能这样做，以便当访问者点击桌面网站链接时，网站加载桌面媒体查询，而不是移动。我希望我在问题上做得非常清楚。我在Google上搜索了解决方案，但找不到任何相关内容。

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（只是最小化浏览器窗口）

或

您可以将用户重定向到指定您希望移动版关闭的新网址，例如：

$("#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" />
}

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

1 个答案: