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

Question

I want to create a web app such as this?

I already have a mobile app how do I display my mobile app like this on the large screens?

On large screens, I want a mobile and then mobile app running within it.

This is the link for the website shown in image

I want my Website to work like this, how can I achieve it?

I already have an mobile app made using ionic, what i want is to use that app for large screens like this website has used.

Answer 1

I'm not sure if I understand what you're asking.

To make responsive websites, you should use this:

@media (min-width: Xpx) {

}

You can define your minimum width here, that indicates the size of browser at which these settings should be applied. If you're using sass, nest this and apply your browser-sized settings there.

I hope that was helpful, but maybe I misunderstood the question and it's more complicated

Answer 2

I don't have any experience of this problem but there is a dedicated article here: https://ionicframework.com/blog/tips-tricks-for-ionic-on-desktop/

Answer 3

This can be created by using an Iframe on the Desktop.

So I created an SVG for the borders of the mobile and rendered my app inside the SVG using the Iframe.

Since I am using Iframe so my app takes mobile width as viewport width and is rendered as it should on mobile.