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.
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.
This is a old question, and Chrome have changed multiple times how to do this.
Is it possible to emulate orientation in a browser?
Emulating Media Types
Open the Chrome Web Tools Panel (F12 or however you open it) Click the little sprocket in the top right of the developer tools window (bottom right in previous versions of chrome's) corner. Under the Settings heading, click Overrides. Next, mark the checkbox next to Emulate CSS Media and then select which media target you'd like to simulate from the dropdown.
Emulating Orientation Changes
Take a peek at this jsfiddle and resize the output frame -- it will switch backgrounds depending on what the browser orientation is.
body {
background-position: top center;
}
@media screen and (orientation: portrait) {
body { background-image: url('http://petapixel.com/assets/uploads/2013/01/vangough.jpg'); }
}
@media screen and (orientation: landscape) {
body { background-image: url('http://cdn-media.hollywood.com/images/l/BobRoss2_620_102912.jpg'); }
}