Emulate iOS and Android embedded browsers in Windows using WebKit

Question

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

Android and iOS devices use WebKit, but I'm not sure how to simulate a 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'm not interested in online emulators, I use WebKit.NET

Answer 1

I did not try to do this with WPF, but with Windows Forms it works as you expected, so this might help:

I use media queries in lines:

 @media (min-width: 300px) { 

and I have a WebKitBrowser control that is populated with a panel (since I have some controls attached to the top of my form) and can be confirmed by simply setting the dimensions of the form, for example.

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

launches media queries as I expected. For instance. I have a Portrait / Landscape button that I use, it just flips the width and height of the form, and the docked browser fills this new orientation. Should be pretty simple?

I think if you try it and then it does not work, you can provide a bit more information that / does not work.

Answer 2

Try this tool

http://quirktools.com/screenfly/

As for different browsers, just download tthm and try in your windows using this site

Answer 3

There are many online emulators to test your site. 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 site in different browsers.

Answer 4

In your place I would install the Mountain Lion + Xcode in VirtualBox on the windows and check Safari. You can emulate IPhone and other devices in Safari.

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