Is it possible to emulate orientation in a browser?

google-chrome css firebug media-queries developer-tools
TryingToImprove picture TryingToImprove · Jan 9, 2013 · Viewed 61.6k times · Source

As the title is it possible to emulate orientation in google chrome or firefox? Meaning somehow change the browser to support media query (orientation = (landscape or portrait))

I have a emulator for mobile, but I would like to have the developer tools from chrome or firebug.

Update

Chrome v25 specific...

To anyone, in Google Chrome Dev Tool > Overrides > Override Device Orientation you can change the alpha, beta and gamma. I think this is a place to start of from, but I have no idea how these work and can therefor not find anything..

It is also possible to Emulate CSS Media, but not portrait and landscape, but print, screen, tv etc.

Update v2

This is a old question, and Chrome have changed multiple times how to do this.

Answer

Giorgio picture Giorgio · Feb 28, 2013

In Chrome Dev Tools: If you go to Settings>Overrides>Device metrics

If you swap the dimensions for the screen resolution the orientation will change and the orientationchange-event will be triggered.

The orientation is depending on the relationship between 'width' and 'height'. If 'height' has a higher value than 'width', the browser will be in orientation: 'portrait' and vice versa.

height > width = portrait
height < width = landscape

Related questions

Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More
How can I inspect and tweak :before and :after pseudo-elements in-browser?

I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent. Despite this feature being mentioned in this WebKit/Safari …

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More