How to switch in between Mobile view and Desktop view using view port in Bootstrap?

Question

I have an HTML page designed with Bootstrap and I want to render it as desktop view and mobile view in a desktop browser. For example there are two buttons in page named DESKTOP and MOBILE, when user clicks on DESKTOP button, page should reload as DESKTOP VIEW and when user clicks on MOBILE button, page should reload as MOBILE VIEW. I tried this implementing using viewport and also using ResponsiveViewPort. but didn't get any good result. It will be very useful if anyone can direct me to a correct path.

Answer 1

此Previewer jquery插件几乎涵盖了您的所有要求。

Here是该库的演示

Answer 2

一种不需要任何特殊编码的替代方案是Chrome中的设备工具栏。点击F12，然后点击左上方看起来像平板电脑和手机的图标。

这将在顶部打开一个条形并相应地调整视口。

您可以选择其中一个默认设备，也可以使用编辑...创建自己的设备。 （还有一个更大的默认列表，未选择显示在菜单中。）还有许多其他首选项。

虽然在实际设备上测试没有好的替代方案，但这可以让您非常了解网站在不同设备尺寸上的外观。

另请注意，每个设备的屏幕尺寸和分辨率都略有不同，这是一个仅为您创建特殊视口的细节。你当然可以创建一个具有常见设备特性的视口，但是你不会在不同的设备上看到完全相同的布局。

其他浏览器具有类似功能：

• Firefox具有“响应式设计模式”。要切换，请单击汉堡菜单，开发人员，响应式设计模式，或使用快捷键Ctrl + Shift + M.
• Edge具有某些Windows设备的模式（Surface平板电脑，诺基亚Windows手机等）
• IE 11在“仿真”选项卡上有一些基本设置，用于显示方向和分辨率。