Is it possible to emulate orientation in a browser?

Question

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.

Princessprinceton

In Chrome, I use the Window Resizer extension: chrome.google.com/webstore/detail/window-resizer/… - it allows you to specify the size of the window, so you could fake the orientation by having the browser either have a portrait or landscape view? – Barayon

Do you know if the extension works with media queries? In Chrome developer tools it is also possible to set width and height of the window, but I don't think it changes the orientation for media queries. – Princessprinceton

According to this question/answer: #4904729 that functionality may only be available to OS X. I just tried using alert(window.orientation); in Chrome on Windows and it doesn't work. For development, could you not use different widths instead of orientations, then switch for the live version? – Barayon

Yes, I think I will have to make som fake values to determine the orientations. Or use a mobile browser.. :/ Also I think that Chrome (other incl.) display landscape as standard, so I have to emulate portrait.. – Princessprinceton

I added an answer for you that shows how to simulate CSS Media such as print, tv etc. Check it out – Sun

You may want to have a look at developers.google.com/chrome-developer-tools/docs/… – Upholsterer

Answer 1

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.

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

Sun

Nice, but the landscape picture can't load.. Here it is with another background image: jsfiddle.net/CuQCB/3 :) – Princessprinceton

You should never use "screen and" media queries (they were never a correct way of implementing media queries); that technique essentially destroyed the tv media type before it ever got started. Smart TVs have to report out a media type of "screen" in order to get anything closely resembling an aesthetically pleasing web site. ...one should also never make absolute statements. – Piecedyed

Edit my answer. Seems like a valid modification. – Sun

Not sure what you mean. I was just pointing out that "screen and" media queries are limiting by design. A print media query is useful for stripping items that are not needing to be printed, but the screen media query adds nothing of positive value; it just destroys compatibility between devices. "Screen and" media queries are superfluous. An em based media query (sans the screen media type) would be much more robust. Note: the absolute statement about absolute statements was just a tongue in cheek self-reference because I had said "never." – Piecedyed

Answer 2

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

Syreetasyria

I can't wait to try this out, that is genius. – Gabriellegabrielli

In Chrome 32.0.1700.77 I don't see Device metrics option under Overrides, I only see Show 'Emulation' view in console drawer :( – Inesita

I am really not sure how you do this in the new version. Sometimes it feels like Google changes Chrome as much as oneself changes his underpants... – Syreetasyria

Comparing of height and width has a serious lack: when you will activate a virtual keyboard in portrait mode, height might be less then weight. – Dictionary

Can you emulate viewport when the virtual keyboard overlay kicks in? I swear google dropped support.. – Bronson

Answer 3

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.

These instructions are current as of

---

Chrome Stable 34.0.1847.131

---

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.

Some other relevant things you can do inside Chrome Dev Tools' Emulator

You can:

• Emulate the Device pixel ratio
• Emulate CSS media types (braille,embossed,handheld,print,projection,screen,speech,tty,tv: See RFC 2534 and related documents for more specifics)
• Spoof user agent: you can have Chrome "impersonate" other browser engines.
• Emulate touch screen (It's not perfect, but it's a nice touch(<=rimshot))
• Emulate geolocation coordinates (including "position unavailable" emulation)
• Emulate Accelerometer

My Personal Tip for Development in Portrait Orientation

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.

Piecedyed

The new emulation tools are fantastic. I was about to update my answer, but I saw this one. +vote – Sun

You should all know that most of Google's websites are aware of being emulated, the present of dev tools is not transparent as you might think, for example the X-DevTools headers (Look for X-DevTools-Emulate-Network-Conditions-Client-Id for more information about it..) – Tyrus

First off you should NOT use device specific media queries. You should ALTER your LAYOUT at the BREAKPOIJNTS. Since there are hundreds of devices, if you just use the browser and locate your breakpoints and you will cover 99% of all devices out there. – Gumption

@DaveNugent I can't tell who you're replying to. I don't think I see evidence of anyone having made a mention of device specific media queries. Are you sure your reply is in the right spot? [Edit: oh, are you replying to the "supported emulation list?"] – Piecedyed

Answer 4

I am using the Console and input this line

window.dispatchEvent(new Event('orientationchange')); 

it will fire the orientationchange event and therefore trigger any event listeners that you have in your script.

Footy

This will trigger the orientationchange event but the screen.orientation.angle variable (developer.mozilla.org/en-US/docs/Web/Events/…) will still be 0 instead of 90 for example so it will fail if you want to bypass a restriction where you have to use a vertical view instead of an horizontal view. – Panic

Answer 5

As @MrOggy85 has stated you the orientation is defined by the height and width of the browser. You can emulate this in firefox via Tools > Web Developer > Responsive Design View, this lets you select common screen sizes and lets you flip the orientation. I hope this helps?

Morelli

This works. I was able to do: var mqOrientation = window.matchMedia("(orientation: portrait)"); and then have listeners mqOrientation.addListener(function(mediaQueryList) { console.log(mediaQueryList.matches) }); that return true/false – Princessprinceton

In Firefox, the responsive design mode will not trigger the orientationchange event and will not update the screen.orientation.angle variable, I created a bug report: bugzilla.mozilla.org/show_bug.cgi?id=1509255 – Panic

Answer 6

For the latest Chrome (version 62), it is changed completely.

1. Toggle Developer Tools.
2. Click the top right menu "Customize and control DevTools".
3. Go through More tools -> Sensors.
4. Change Orientation to Landscape left or Landscape right as u like.

Osteoclasis

Answer 7

There are a lot of answers here, but I think Chrome may have evolved slightly and this isn't too complex. Go into Developer Tools > Emulation in Chrome. There are 4 sub-tabs: Device, Screen, User Agent, and Sensors. Under Device you can choose your device (e.g. "Apple iPad 1 / 2 / Apple Mini"). If you need to simulate swapping orientation, just go into the Screen subtab and there's a little button with arrows going left and right to swap orientation. Just press that button.

Piscary

This is the real answer. – Venu

Answer 8

Easy!!! default view is Portrait if you are emulating the device, (despite the css media query of portrait) you can just handle the resolutions, there's this image in Google's documentation https://developer.chrome.com/devtools/docs/mobile-emulation/device_metrics.png

Just click in the Arrows between the RESOLUTION Width and Height and its DONE!!

Enjoy

Howerton

Answer 9

Device Orientation changes can be emulated in Chrome. Simply go to the "Settings" menu, which can be opened using the cog icon at the bottom right of the Developer Tools and select the "Overrides" tab. Select the "Override Device Orientation" checkbox and enter new values in to the input boxes.

Alpha represents the motion of the device around the z axis from 0 to 360 degrees. Beta represents the motion of the device around the x axis from -180 to 180 degrees - a front to back motion. Gamma represents the motion of the device around the y axis from -90 to 90 - a left to right motion. Changing the values will trigger a deviceorientation event.

Hope this is helpful.

Herrenvolk

Answer 10

In the emulation tab just click on screen button on the left and on the button between 320 and 568 so you switch the resolutions! that will emulate portrait and landscape mode.

Ark

Answer 11

Bit late but this works on Google chrome too.

Open firebug and click on the phone icon following which you can select the device model you want to see the app in.

Something like this

Next, go to resolution under emulation properties as shown in the picture above. (Right bottom corner) Now click on the double arrow icon in the same resolution property. You should see something like this

See the height and width have been swapped and hence rotated :)

Hope that helps.

Rooky

Answer 12

For those who need 3D device orientation (alpha, beta, gamma), it is possible!

[]

Follow the Google guide: https://developer.chrome.com/docs/devtools/device-mode/orientation/

Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu.

Type sensors, select Show Sensors, and press Enter. The Sensors tab opens up at the bottom of your DevTools window.

Exciting

Answer 13

Just change the context before setting the orientation....

driver.context("NATIVE_APP");
driver.rotate(ScreenOrientation.LANDSCAPE);
driver.context("WEBVIEW_1");

Microvolt

Answer 14

Toggling orientation should be available on the chrome devtools device toolbar, make sure the toolbar is wide enough or the button will be hidden!

Alternatively you can set the dimensions to reponsive and resize by dragging the corner and making it wider than it is tall.

The device toolbar can be toggled from the run command in devtools or via hotkey (ctrl+shift+M in win)

Preconceive