11

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?

KPexEA
  • 16,560
  • 16
  • 61
  • 78

6 Answers6

8

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.

KPexEA
  • 16,560
  • 16
  • 61
  • 78
  • You could also just test screen-based css in IE6 on windows, but I wouldn't recommend it... – Chris Marasti-Georg Nov 03 '08 at 18:12
  • Why on earth would someone downvote this when I FOUND what I was looking for, call me confused. – KPexEA Nov 03 '08 at 18:20
  • I don't see the "Small Screen" option in the latest (10.53) version of Opera. Perhaps it has been removed. – John D. Cook Jun 03 '10 at 21:49
  • @John The option has moved. Press Shift+F11 or look under Page > Developer Tools > Layout > Mobile View. – mercator Jul 23 '10 at 14:32
  • @mercator: Thanks, but this still doesn't work for me. I see View -> Developer Tools, but no Layout under that. And Shift+F11 doesn't do anything. – John D. Cook Jul 23 '10 at 21:28
  • @John: hmmm, maybe you need the [Debug menu](http://dragonfly.opera.com/app/debugmenu/DebugMenu.ini) in that case. Also see here: http://www.opera.com/dragonfly/ – mercator Jul 26 '10 at 08:10
6

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.

ilya n.
  • 18,398
  • 15
  • 71
  • 89
3

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 :)

Chris Marasti-Georg
  • 34,091
  • 15
  • 92
  • 137
  • My CSS is embeded since it is customized based on the users preferences ( they can customize the default font size / colors etc ). I guess I should split out the part that is static. It's on my to-do list. – KPexEA Nov 03 '08 at 21:56
  • You can also serve it dynamically from your server. Have a server-side process (php script, whatever) handle the request for customUser.css and write it based on their preferences. This way it can still be cached by the browser. – Chris Marasti-Georg Nov 03 '08 at 23:10
1

I found out that switching media types in development environment works best for me.

For example if you are testing "handheld" css then just add media type "screen" to media atrib and comment out your default css.

After this step is complete, you normally would want to test in on real handheld device.

<!-- <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> -->
<link rel="stylesheet" type="text/css" media="screen,handheld" href="handheld.css" />
Fordnox
  • 11
  • 1
0

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

Huibert Gill
  • 723
  • 5
  • 8
0

Most smartphones like the iPhone and some Android devices don't recognize the handheld.css. They took the mediatype="screen" so you need to include this short snippet of JavaScript.

Ulf Gjerdingen
  • 1,414
  • 3
  • 16
  • 20
Smashing Ninja
  • 1