What do you use to test the handheld css on your website?

Question

I've been adding css support for handheld to my website but haven't been able to find a good tool for testing.

I tried using the webdeveloper plugin for Firefox but it doesn't work for me. Maybe that is because all my css is in the html and not a seperate css file.

Are there any other testing tools available aside from going out and buying a handheld device?

Answer 1

If you have Visual Studio, there should be device emulators which let you test mobile IE, or they can be found standalone on Microsoft's site. Here are some for WM 5. There is an OpenWave simulator available to test that browser. Blackberry simulators are available as well, to test the Blackberry browser. You can (kind of) test iPhone support with Safari, although you can't verify the viewport meta-tag. There's an Opera Mini simulator here.

Also, get your CSS out of your HTML :)

Answer 2

For testing the iPhone, you can get the iPhone SDK here But you need OS X / Apple computer for it to run the official way.

Not official/hacks:

• There are ways to get OS X running on standart PC hardware like here.
• Or get the SDK running in Linux / vmware described here.

Happy Hacking!

Huibert Gill

Answer 3

With a bit of hunting I found what I was looking for, thanks for the leads guys.

Opera will display the handheld css if you select "Small Screen" from the View menu.

Answer 4

I'm not sure if it's a good idea to resurrect the old question, but I hope somebody finds it :)

There's a simple way to test handheld css with with media queries:

    @media handheld, screen and (max-width: 500px) { /* your css */ }

After that you can test on browsers that implement media queries by resizing the window to less than 500px.