Device orientation emulator for HTML5

Question

Is there an orientation device simulator/emulator for an HTML 5 interpreter (aka web browser)?

I'm playing around with the DeviceOrientation Event Specification in HTML 5 and I'm able to code an example that works in my Android smartphone's browser.

However, during the development phase I would like to work directly on my PC for trying out the code and I'm searching for a device orientation emulator.

For Android I found OpenIntents Sensor Simulator, which is not useful because you need to include special Java code in the application, thus it is not available in the web browser (until you use some special one). Is there any other device emulator for Android directly working in the browser?

I could also not find any simulator for Firefox.

Any other solution?

Answer 1

Well in Chrome there's this

Non animated version:

1. Open the Developer Tools fromt the hamburger menu
2. Press ESC or click the >_ icon
3. Select the emulation tab
4. Click the phone icon　📱

Note there are apparently some issues with Chrome's devtools emulation so there's also this device orientation emulation library.

Answer 2

However, during the development phase I would like to work directly on my PC for trying out the code and I'm searching for a device orientation emulator.

There is Xcode which comes with an iPhone simulator that you can change orientation with. The Android SDK also allows you to create virtual Android devices which you can use like a real phone, but on your computer screen. Also there is the Opera mobile emulator which does the same for - Opera Mobile.

You can then use Prefix free to develop your code so you don't have to worry about vendor prefixes for CSS.

Mozilla suggests you test on these Devices/Simulators/Emulators and also directly on the device because it will slightly differ from what you will get on your trusty computer.

And, last but not least (and only slightly related to your question) there is really awesome stuff like Weinre, Adobe Shadow and the new Safari 6 Webinspector that let you debug JavaScript and edit the DOM and CSS from your computer right on the device. Shadow even lets you reload a couple of connected devices at once.