如何使用Bootstrap中的查看端口在Mobile視圖和Desktop視圖之間切換？

Question

我有一個使用Bootstrap設計的HTML頁面，我想在桌面瀏覽器中將其呈現為桌面視圖和移動視圖。 例如，頁面中有兩個名為DESKTOP和MOBILE按鈕，當用戶單擊DESKTOP按鈕時，頁面應重新加載為DESKTOP VIEW而當用戶單擊MOBILE按鈕時，頁面應重新加載為MOBILE VIEW 。 我嘗試使用viewport以及ResponsiveViewPort實施此實現。 但沒有得到任何好的結果。 如果有人可以引導我走正確的道路，這將非常有用。

Answer 1

這個Previewer jQuery插件幾乎可以滿足您的所有要求。

這是該庫的演示

Answer 2

不需要您進行任何特殊編碼的一種替代方法是Chrome中的設備工具欄。 按下F12鍵，然后單擊左上角看起來像平板電腦和手機的圖標。

這將在頂部打開一個條形圖，並相應地調整視口。

您可以從默認設備之一中進行選擇，也可以使用“編輯...”創建自己的設備。 （還有一個更大的默認菜單列表，這些默認菜單沒有選擇出現在菜單中。）那里也有很多其他首選項。

盡管沒有很好的方法可以在實際設備上進行測試，但這可以使您很好地了解網站在不同設備尺寸下的外觀。

還要注意，每個設備的屏幕尺寸和分辨率都略有不同，這是一個僅創建特殊視口就不會顯示的細節。 您當然可以創建具有普通設備特征的視口，但在其他設備上看不到完全相同的布局。

其他瀏覽器具有類似的功能：

• Firefox具有“響應式設計模式”。 要進行切換，請單擊漢堡包菜單，開發人員，響應式設計模式，或使用快捷鍵Ctrl + Shift +M。
• Edge具有某些Windows設備（Surface平板電腦，諾基亞Windows Phone等）的模式。
• IE 11在“仿真”選項卡上具有一些基本設置，用於顯示方向和分辨率。