在移动视图中显示小部件演示

Question

我正在为我的公司创建一个内部网应用程序，其中包含由我们开发的不同插件或常用的插件。这是一个响应式设计。现在我有一个新的要求，在不同的移动设备上显示小部件演示，如iphone，android等。

我的主角告诉我this example

根据设备选择，我们需要在不同设备中显示插件。 例如，我有一个名为datatable的小部件，我需要为此启用不同的视图。我怎样才能实现它。 我不知道如何实现它。请帮忙

Answer 1

好的，首先，不需要jQWidgets DataGrid。这是一个小型应用程序的开销。

相反，我建议你只使用bootstrap网格（不是完整的bootstrap库）。您可以下载this css file。

现在您已经安装了网格，您可以使用col-*-*创建适当的布局，这将适用于所有设备。

Answer 2

建议的解决方案取决于您的小部件演示的目标。针对各种情况提出的一些解决方案如下。如果您需要更多信息，请准确说明您的真实需求。

目标1：在技术演示中根据屏幕尺寸演示不同设备中窗口小部件的外观。

最方便的方法之一是使用Google Chrome的Devtools中的Device Mode and Mobile Emulation。它允许您通过模拟不同的屏幕尺寸和分辨率来预览布局。

目标2：允许非技术用户在漂亮的模拟器中预览小部件。

您可以考虑使用第三方解决方案，例如mobiletest.me。这种付费服务可能会节省大量的开发成本。

目标3：无论如何我们需要开发自己的解决方案

如果您的团队坚持要实施它，请考虑使用iframe分隔您的网页和小部件演示。使用background-image将模拟器的图像放在窗口小部件后面。使用padding或position将您的小部件放在合适的位置。