如何使用在桌面浏览器上运行的移动应用程序渲染移动屏幕？答案

【问题标题】：How to render a mobile screen with mobile app running on desktop browser?如何使用在桌面浏览器上运行的移动应用程序渲染移动屏幕？
【发布时间】：2020-10-13 05:41:18
【问题描述】：

我想创建一个这样的网络应用程序？

我已经有一个移动应用程序，我该如何在大屏幕上显示我的移动应用程序？

在大屏幕上，我想要一个移动应用程序，然后在其中运行移动应用程序。

This is the link for the website shown in image

我希望我的网站可以这样工作，我该如何实现？

我已经有一个使用 ionic 制作的移动应用程序，我想要将该应用程序用于本网站所使用的大屏幕。

【问题讨论】：

只要使用普通的css和html就可以了，没有什么特别的，它只是一个用html和css制作的移动页面。这是你的问题吗？

标签： javascript html css ionic-framework mobile

【解决方案1】：

这可以通过使用桌面上的 iframe 来创建。

因此，我为移动设备的边框创建了一个 SVG，并使用 Iframe 在 SVG 中渲染了我的应用程序。

由于我使用的是 Iframe，所以我的应用程序将移动设备宽度作为视口宽度并在移动设备上按应有的方式呈现。

【讨论】：

您好，我正在寻找一个模板，可以像您一样在网站内显示移动应用程序。你能分享你的html代码吗？

【解决方案2】：

我对这个问题没有任何经验，但这里有一篇专门的文章：https://ionicframework.com/blog/tips-tricks-for-ionic-on-desktop/

【讨论】：

【解决方案3】：

我不确定我是否明白你在问什么。

要制作响应式网站，您应该使用这个：

@media (min-width: Xpx) {

}

您可以在此处定义最小宽度，即应用这些设置的浏览器大小。如果您使用的是 sass，请将其嵌套并在其中应用您的浏览器大小的设置。

我希望这对您有所帮助，但也许我误解了这个问题并且它更复杂

【讨论】：

是的，也许我没有很好地澄清自己，我有一个使用 ionic 制作的移动应用程序，我想要在更大的屏幕上运行我的移动应用程序，如图所示，如何我是否在 div 中运行我的应用程序