css - 单击按钮更改响应和无响应的站点

Question

我有一个带有 bootstrap 3.1.1 的响应式网站。我想在用户单击“桌面 View ”按钮时显示桌面 View 。

我用过this question right here作为支持，但这无济于事。

它没有帮助有两个原因:-

1. 我在布局文件中添加的 CSS 如下所示:

<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />

1. 我用过hidden-xs , hidden-sm , hidden-md和 hidden-lg整个申请过程中的类(class)。

如何通过单击按钮使站点桌面 View 和移动 View ？

编辑

我同时使用两个样式表。 “mobile.css”和“desktop.css”的样式表(用于不需要专门为手机设计样式的元素)。

所以交换两个样式表是行不通的。

Answer 1

一种方法:是在单击按钮时使用 Jquery 更改视口(viewport)的元标记:

$('#buttonId').click(function (){
        $('meta[name=viewport]').attr('content', "width=1024");
});

---

我只是想到了一些简单的事情。对于所有具有 hidden-xs 类的 div:添加一个特殊类 (had-hidden-xs)，为 hidden-lg 添加 had-hidden-lg 等等。

//when the button is clicked, every class is removed
$('#buttonId').click(function (){
   //removes all the classes  
   $('.hidden-xs, .hidden-sm, .hidden-md, .hidden-mg').removeClass('hidden-xs hidden-sm hidden-md  hidden-mg');
});

//when the button to go to mobile view is clicked: 
$('#backToMobile').click(function (){
   //add back your classes using the classes you created in the previous 2 steps
   $('.had-hidden-xs').addClass('hidden-xs');
   $('.had-hidden-sm').addClass('hidden-sm');
   $('.had-hidden-md').addClass('hidden-md');
   $('.had-hidden-lg').addClass('hidden-lg');
});

在问题编辑之前:查看您的样式表，您可能也有桌面样式，因为您有一个 mobile.css。您可以使用 jquery 轻松交换样式表

$('#buttonId').click(function (){
   $('link[href="styles/mobile.css"]').attr('href','desktop.css');
});

$('#buttonId').click(function (){
   $('link[href="style/desktop.css"]').attr('href','mobile.css');
});