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??
I solved this by using an iframe when it browsed in an desktop browser and redirecting when using a mobile browser