html - 在桌面浏览器窗口中以不同视口(viewport) [移动设备、平板电脑、桌面设备] 呈现网站

Question

我正在构建一个类似于 WIX 的应用程序，使用户能够轻松地创建网站。在顶部，有这三个图标(桌面、移动、平板电脑)供用户在相应的视口(viewport)中选择和查看他们的网站。

我很好奇，执行此操作的最佳方法是什么？

我查了一下，发现 iFrame 是实现此目的的一种方法。我正在使用 React 构建这个应用程序，并使用“react-frame-component”包用 iframe 包装我的组件。离预期的结果还很远。

Answer 1

如果您的媒体查询是基于屏幕尺寸而不是 dpi 或其他设备特定功能，您可以简单地将整个网站预览包装在一个 div 中，并具有所需的尺寸:

例如:

.wrapper.mobile{
  width:100%;
  max-width:480px; /* or whatever */
}

.wrapper.tablet{
  width:100%;
  max-width:720px; /* or whatever */
}

.wrapper.desktop{
  width:100%;
}

然后使用简单的 js 函数根据用户选择将正确的类附加到包装器。