Simulate Mobile Preview

I have an application in which I would like to show the user approximately what a web page that they created might look like on a particular mobile device. For example, the iPhone5 has a 3" x 2.5" viewing area and I want to display a web page in a windows form to simulate what their page may look like on that device. For starters, I am creating a windows form that is the same size as the mobile device's viewing area. Within the form is a docked-full web browser control. I load their web page into the web browser control, but I want to simulate what the page would look like on the device, taking into account the target device's resolution. Any ideas on how to accomplish this?

As far as i know each site detect the type of device and the screen resolution then send a css version for the requested page that fit properly, so it is not enough to just set the size of the web browser control.

Quote:

---

Originally Posted by Absolute_Zero

As far as i know each site detect the type of device and the screen resolution then send a css version for the requested page that fit properly, so it is not enough to just set the size of the web browser control.

---

Right, that's precisely the problem I'm trying to solve if possible; the reason for the post.

The site typically does one thing (if at all): Determine if the user is mobile and (potentially) re-route them to the mobile site.

Newer websites send ONE CSS file that contains a MEDIA query that adjusts elements and content based on a few parameters that the media query allows for. If you want to emulate such a thing, just merely resize your browser window and watch the media query take effect.

Slightly older websites will contain a CSS reference to a "mobile" style-sheet. I can't even remember how it does that, though...I think the type is like...handheld or something.