Menu
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.
396
At the moment, there is no way to install Chrome on an Android emulator. However, you can use the Android Browser, the Chromium Content Shell and Firefox for Android which we'll cover later in this guide.
Type sensors , select Show Sensors, and press Enter . The Sensors tab opens up at the bottom of your DevTools window. From the Orientation list select one of the preset orientations, like Portrait upside down, or select Custom orientation to provide your own exact orientation.
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
109
I'm sure others have figured out how to emulate orientation in Chrome by now, but I came across this post and wanted to add instructions for anyone still looking for help.
It's actually rather simple.
From within Chrome Dev Tools (Inside Chrome, hit F12 to bring up Chrome Dev Tools) go to the Emulation tab.
Select the device you wish to emulate from the dropdownlist and hit Emulate. When you Emulate, the "Screen" section that is in the stacked section list to the left of the Emulation tab gains a checkmark to indicate it is active. Select it.
In the Screen section, the resolution of the device you are emulating will be displayed in text input fields near the top. There is a "swap dimensions" button between them that will switch the width with the height, which in essence will switch your emulation from portrait to landscape.
You can:
Assuming you have a 16:9 monitor, a rotating VESA stand, and drivers that support a change in orientation (you can find that out in Windows' Screen Resolution settings. If there's an "Orientation" dropdownlist, then you can rotate your view)
Physically rotate your screen, then rotate your display in Windows (you can also [Ctrl][Alt][Left Arrow] to rotate the display). Emulate a portrait orientation as I mentioned above and set the Device pixel ratio to 1. This will scale up your mobile device emulator to full screen size. It won't natively trigger a mobile layout without some additional help, but em based media queries will allow you to [Ctrl][+] to scale up Chrome's em value to trigger your mobile layout.
Using the Dev Tools emulation allows you to approximate a touch screen interface without a touch screen monitor.
It also allows you to have any sized 16:9 monitor display a "widescreen" mobile layout. Naturally, a 16:10 monitor would allow you to emulate 10:16 layouts without having to resize your browser
The one feature I really want to see Google add to this is the ability while emulating to have a "double tap" auto-resize the window. That's not currently supported.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
