Displaying a JQuery-Mobile website on a desktop as if it was on a mobile device (resolution)
I have developed a piece of software that allows users to define their own web content and distribute it themselves. I have added JQuery Mobile functionality successfully so that they can decide to use a mobile enhanced view when using a mobile device.
I have a preview page where I display the site as the end-user would view it with a radio mobile/desktop/tablet to choose which view they want.
When they select the mobile view it displays a silhouette of a mobile device and they can view the mobile content in this element as the user would see it on a mobile device.
My problem is that the mobile version is being displayed in the desktop resolution so the content (buttons etc) are huge in comparison to what it would look like on the real thing.
Is there a way that I can change the resolution just inside this element so the buttons etc are smaller and look how it would on a mobile device?
I hope this all makes sense as I had trouble wording it properly. I have played with the view-port with no success.
What I want it to look like:
Perhaps loading through an iframe with the following meta tag in the head of the JQM page:
<meta name="viewport" content="width=device-width, user-scalable=no">
Hope it helps - I haven't tested it yet... just a thought.