Emulating iOS and Android built-in browsers on Windows with WebKit

Question

I am developing a mailing application with .NET and it auto generates the CSS for different screen sizes. What is the best way to view the results in Windows?

Android and iOS devices use WebKit, but I am not sure how to mimic the screen size.

For example, when I have something like:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />

I am not interested in online emulators, I am using WebKit.NET

Answer 1

Try this tool out

http://quirktools.com/screenfly/

As far as different browsers just download tthm and try it on your windows by using that site

Answer 2

There are many online emulators to test your website. http://www.coderebel.com/support/features/iphone-simulator.html http://iphone4simulator.com/ http://iphone-emulator.org/

you can also use Spoon.net to test your website in various browser

Answer 3

On your place I would install a mountain lion + XCode in a VirtualBox on windows, and check on Safari. You can emulate IPhone and other devices in Safari.

here is a simple referecne how to debug a website under iOS safari emulation in OSX Safari

Answer 4

I haven't attempted this with WPF, but with Windows Forms it works as you would expect, so this may help:

I use media queries along the lines of:

@media (min-width: 300px) {

and I have a WebKitBrowser control docked to fill a panel (as I have some controls docked to the top of my form) and can confirm than simply setting the form dimensions, eg

this.MaximumSize = this.MinimumSize = this.Size = new Size(width, height);

triggers the media queries as I would expect. Eg I have a Portrait/Landscape button that I use, this just flips the width and height of the form and the docked browser fills that new orientation. Should be pretty straightforward?

I guess if you try it out, and then it doesn't work, you can then provide a bit more information about what is/isn't working.