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.

Looks Like:

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.


Need Your Help

How can I detect/avoid autoboxing in Java?

java intellij-idea primitive-types autoboxing

I'm working on a program that deals constantly with gigabytes of data, mostly primitives and strings. I need to avoid having the primitives converted to Objects by autoboxing as this explodes the h...

How do I get rid of scrolling?

html scroll

I did not understand how to get rid of a vertical scrollbar on my page. This is my page html. Navbar at the top of the page is bootstrap navbar fixed top: