Search code examples
cssjquery-mobileoverflowbounding-box

How do I embed Jquery mobile in a container?

I would like to showcase my app written in Jquery Mobile under a desktop browser, so that the app is contained in a phone image. One way of doing this is using an iframe. But I would like to put the app in a div.

The question is Jquery Mobile doesn't seem to change size at all. I am putting the datarole="page" div into a container div with the styles:

{
 width:320px;
 height:480px;
 overflow:hidden;
 margin-left:100px;
}

Instead of restricting the mobile app, the container div is resized and hidden behind the page div(inspected using chrome), which is particularly strange since I have overflow:hidden. How could the page been shown outside of the container div??

Solution

  • I solved this by using an iframe when it browsed in an desktop browser and redirecting when using a mobile browser