A screen.orientation ponyfill ๐ฅ
This is a ponyfill for the new, currently in-draft screen.orientation API.
Use npm:
npm install o9n
Using browserify:
var orientation = require('o9n').orientation;
or build it and include the file in a <script>
-tag:
<script src="dist/o9n.js"></script>
It will be available in window.o9n
.
If you're in an environment where window
may be undefined like during an SSR, you're able to call the included getOrientation
method when window
is defined in order to get the same orientation
object
var getOrientation = require('o9n').getOrientation;
var orientation = getOrientation();
It should work in these browsers although I couldn't test them all manually (or automatically).
- IE10+
- Edge 12+
- Firefox 6+
- Safari 6+
- Chrome 9+
- Opera 15+
- iOS Safari 5.1+
- Android browser 3+
- Blackberry browser 10+
- Opera mobile 30+
- Chrome for Android (some versions ago)
- Firefox for Android (some versions ago)
- IE Mobile 10+
npm run build
creates o9n.js
in the dist dir
This ponyfill leverages all the browser APIs there are at the moment:
Methods:
screen.msLockOrientation
(IE11, Win8.1, Edge 12+)screen.msUnlockOrientation
(IE11, Win8.1, Edge 12+)screen.mozLockOrientation
(Firefox 18+)screen.mozUnlockOrientation
(Firefox 18+)
Events:
window.onorientationchange
(iOS)screen.onmsorientationchange
(IE11, Win8.1, Edge 12+)screen.onmozorientationchange
(Firefox 18+)
Getters:
window.orientation
(iOS)screen.msOrientation
(IE11, Win8.1, Edge 12+)screen.mozOrientation
(Firefox 18+)
It normalises them to the aforementioned API draft which is implemented in Chrome 38+, Opera 25+. Also it falls back to a media-query solution for browsers that don't support orientation events at all (all that were not mentioned yet).
Locks the orientation on devices that support it. Possible values are:
any
natural
landscape
portrait
portrait-primary
portrait-secondary
landscape-primary
landscape-secondary
It returns a promise which resolves, when the orientation was locked. The promise will be rejected if the device could not be locked or locking is not supported at all.
Unlocks the orientation on devices that support it. Returns undefined.
o9n.orientation
can listen to the change
event that fires every time the orientation was changed. Just use o9n.orientation.addEventListener
or o9n.orientation.onchange
like you would normally do.
Equals to one of the following
portrait-primary
portrait-secondary
(portrait upside down)landscape-primary
landscape-secondary
(landscape upside down)
Currently equals to 0 for browsers that don't support it.
It is also possible to install o9n as a polyfill. Just call
o9n.install();
before using any of the orientation API.
It will be then available as window.screen.orientation
.
This implementation already differs a bit from the current browser implementation in Blink. So it is not recommended to use it as a polyfill to not confuse tools like Modernizr.
npm test
I'm happy for every contribution or manual tests in browsers I could not test. Just open an issue or directly file a PR.
MIT