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

score 2 · Answer 1 · answered Sep 08 '13 at 17:47

2

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

answered Sep 08 '13 at 17:47

SuNnY_sYeD

513
1
6
19

score 2 · Answer 2 · answered Sep 08 '13 at 18:00

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

answered Sep 08 '13 at 18:00

sudhansu63

6,025
4
39
52

score 2 · Answer 3 · answered Sep 12 '13 at 12:35

2

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

answered Sep 12 '13 at 12:35

alex440

1,647
3
20
35

1

Last time I checked, the OSX licence only *legally* allowed installation on Apple hardware – Rowland Shaw Oct 01 '13 at 16:31

score 1 · Accepted Answer · answered May 27 '14 at 14:04

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, e.g.

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

triggers the media queries as I would expect. E.g. 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.

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

4 Answers4