点击按钮

Question

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

我使用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类。

如何通过点击按钮来制作网站桌面视图和移动视图？

修改

我同时使用两个样式表。 “mobile.css”和“desktop.css”的样式表（对于不需要专门为手机设计样式的项目）。

所以交换样式表都不行。

Answer 1

方法：单击按钮时使用Jquery更改视口的元标记：

$('#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');
});