如何将svelte应用封装在svelte应用的iframe中？

一个针对移动设备的苗条应用程序将被在线模拟（一个内部呈现实际应用程序的移动绘图）。由于媒体查询（因为应用程序是整个页面，而不仅仅是移动绘图内容，所以不起作用），我的最佳解决方案是应用程序应该位于iframe中

有没有一种方法可以做到这一点，而不用编写另一个封装前者的小巧应用程序？因为它会把所有东西捆绑在一起。我可以处理sapper设置来控制它，但对我来说有点混乱。正如将CSS扭曲以模拟媒体查询一样，在发布到生产目标时将所有内容切换回原处

然后，我将运行两个不同的sapper CLI的开发服务器，package.json、git repos等。还必须考虑部署，涉及两个public/dist文件夹及其路径/路由

还有其他想法吗

编辑：更清楚地说，我基本上有4个选项：

1-在没有媒体查询和vh/vw单位的情况下调整CSS（这是一种困难的方式，有时可能是不可能的）

2-仿真器作为组件（但iframe src指向何处？）

3-设置两个汇总输出，也许app是一个可水合组件。Iframe将指向输出2（如何协调？index1与index2？同一公用文件夹与应用程序的2个渲染部分）

4-两个独立的应用程序，整个过程（如何部署？两个Web服务器都可以，但理想情况下它应该成为一个最终应用程序）

如果我没弄错的话，希望它更清楚

打包成一个可滚动的div怎么样

您的苗条应用程序打包到bundle.js中。将index.html重命名为sth.html，然后在新的index.html中使用iframe src=sth.html

---

可以使用“仅选择要作为iframe主体的目标”。有关如何创建苗条组件的详细信息

---

是的，对于1来说，问题是媒体查询（当整个页面都是时，适用于内部应用程序，但在div中失败），而在2中，我需要2 index.html，一个用于emulator，另一个用于应用程序本身。我可以重命名，但如何配置所有内容？在您的情况下，可能可以使用iframe打开本地html，以更正index.html。但这看起来已经有点粗糙了。因此，我建议重构css，因为SCS不会以这种方式通过。。。

import App from './App.svelte';

const iframe = document.createElement("iframe");
iframe.onload = (ev) => {
    const app = new App({
        target: iframe.contentWindow.document.body,
        props: {
            name: 'world'
        }
    });
};
document.body.append(iframe);