使用按鈕點擊更改響應式和無響應的站點

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' />

我已經使用hidden-xs,hidden-sm,hidden-md和hidden-lg類通過我的應用程序。

如何使用按鈕單擊網站桌面視圖和移動視圖？

編輯

我同時在同一時間同時使用樣式表。 「mobile.css」和「desktop.css」的樣式表（用於不需要爲手機專門​​設計的項目）。

因此，交換樣式表都行不通。

Answer 1

一個辦法：就是使用jQuery來改變meta標籤視口單擊該按鈕時：

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

---

我只是想的東西簡單。對於所有具有隱藏-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'); 
});