如何使用 Bootstrap 中的视口在移动视图和桌面视图之间切换？
How to switch in between Mobile view and Desktop view using view port in Bootstrap?
我有一个使用 Bootstrap 设计的 HTML 页面，我想在桌面浏览器中将其呈现为桌面视图和移动视图。例如，页面中有两个名为 DESKTOP 和 MOBILE 的按钮，当用户单击 DESKTOP 按钮时，页面应重新加载为 DESKTOP VIEW，当用户单击 MOBILE 按钮，页面应重新加载为 MOBILE VIEW。我尝试使用 viewport 和 ResponsiveViewPort 实现此实现。但没有得到任何好结果。如果有人能指引我走上正确的道路，那将非常有用。
这个 Previewer jquery 插件几乎可以满足您的所有需求。
Here 是该库的演示
一种不需要您进行任何特殊编码的替代方法是 Chrome 中的设备工具栏。按 F12，然后单击左上角看起来像平板电脑的图标和 phone。
这将在顶部打开一个栏并相应地调整视口。
您可以从一种默认设备中选择，或使用“编辑...”创建您自己的设备。 （还有一个更大的列表，其中包含未选择显示在菜单中的默认选项。）其中还有许多其他首选项。
虽然在实际设备上测试没有好的替代方法，但这会让您很好地了解网站在不同尺寸的设备上的外观。
另请注意，每台设备的屏幕尺寸和分辨率都略有不同，仅创建一个特殊的视口不会为您显示这些细节。您当然可以创建具有普通设备特征的视口，但在不同的设备上您不会看到完全相同的布局。
其他浏览器也有类似的功能：
- Firefox 有 "Responsive Design Mode"。要切换，请单击汉堡菜单、开发人员、响应式设计模式，或使用快捷键 Ctrl + Shift + M。
- Edge 具有适用于某些 Windows 设备（Surface 平板电脑、诺基亚 Windows phone 等）的模式
- IE 11 在“仿真”选项卡上有一些关于显示方向和分辨率的基本设置。
我有一个使用 Bootstrap 设计的 HTML 页面，我想在桌面浏览器中将其呈现为桌面视图和移动视图。例如，页面中有两个名为 DESKTOP 和 MOBILE 的按钮，当用户单击 DESKTOP 按钮时，页面应重新加载为 DESKTOP VIEW，当用户单击 MOBILE 按钮，页面应重新加载为 MOBILE VIEW。我尝试使用 viewport 和 ResponsiveViewPort 实现此实现。但没有得到任何好结果。如果有人能指引我走上正确的道路，那将非常有用。
这个 Previewer jquery 插件几乎可以满足您的所有需求。
Here 是该库的演示
一种不需要您进行任何特殊编码的替代方法是 Chrome 中的设备工具栏。按 F12，然后单击左上角看起来像平板电脑的图标和 phone。
这将在顶部打开一个栏并相应地调整视口。
您可以从一种默认设备中选择，或使用“编辑...”创建您自己的设备。 （还有一个更大的列表，其中包含未选择显示在菜单中的默认选项。）其中还有许多其他首选项。
虽然在实际设备上测试没有好的替代方法，但这会让您很好地了解网站在不同尺寸的设备上的外观。
另请注意，每台设备的屏幕尺寸和分辨率都略有不同，仅创建一个特殊的视口不会为您显示这些细节。您当然可以创建具有普通设备特征的视口，但在不同的设备上您不会看到完全相同的布局。
其他浏览器也有类似的功能：
- Firefox 有 "Responsive Design Mode"。要切换，请单击汉堡菜单、开发人员、响应式设计模式，或使用快捷键 Ctrl + Shift + M。
- Edge 具有适用于某些 Windows 设备（Surface 平板电脑、诺基亚 Windows phone 等）的模式
- IE 11 在“仿真”选项卡上有一些关于显示方向和分辨率的基本设置。