Changing css media type in browser

Question

Is there some means of specifying the default media type for a browser (let's say chrome), so that I can test css @media styles?

@screen   
{  
    div { background-color:red; }  
}  

@handheld  
{  
     div { background-color:lime; }  
}

<div style="width:100px;height:100px"></div>

Such that I could (without touching my code) test the two media types in the browser? Changing the media type would change the color of the div above. A chrome extension, a bit of javascript or some other magic would be greatly appreciated.

Answer 1

Could this be what you're looking for?

Web Developer extension for Chrome

The web developer extension has a feature called "Display CSS By Media Type". If this doesn't help you, you could always make one stylesheet per media type and use the import css statement to specify which type to load:

@import url("handhelds.css") screen;

Answer 2

Ilya on Stackoverflow wrote this answer, I found it easy and useful:

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.

That's all!