Search code examples
google-chromecssfirebugmedia-queriesdeveloper-tools

Is it possible to emulate orientation in a browser?


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.


Solution

  • Refer to K. Alan Bates's answer for an explanation of Chrome's more recent emulation features/updates.

    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.

    enter image description here

    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'); }
    }