Feature request: "ua-portrait" / "ua-landscape" ?
Closed this issue · 2 comments
I am working on a project and it would be a benefit if cssuseragent could detect the orientation of mobile devices. My thought is it would be a variable that would pair with "mobile". I think it would also need to be detected with "orientationchange" and/or "onresize"
Might you consider adding this feature?
cssua.ua = {
android: "1.5",
mobile: "android",
webkit: "525.10",
orientation: "landscape"
}
Thanks for the suggestion @verbatim. Unfortunately to keep the value accurate, the implementation would have to attach a handler to the window's orientationchange event. Library code should really try to interact with the DOM as little as possible as the DOM is much slower than native JavaScript. The implementation is relatively straight forward to add, but what each app wants to do with that info may not be consistent and the overhead isn't a good idea for library code.
Here is a code snippet that doesn't depend on anything for you to start with in your own code:
if ('onorientationchange' in window) {
var onorientationchange = function() {
var landscape = (window.orientation % 180) !== 0;
if ('cssua' in window) {
cssua.ua.orientation = landscape ? 'landscape' : 'portrait';
}
// TODO: decide here if you also want to update CSS classes:
// document.documentElement.className
};
window.addEventListener('orientationchange', onorientationchange, false);
window.addEventListener('resize', onorientationchange, false);
setTimeout(onorientationchange, 0);
}
Thank you for providing the code suggestion. I am going to see how it works with my project.
Maybe you could provide it as a separate plug-in.
Cssuseragent is such a great JS. It does quite a lot of detection. I'm sure I can't be the first person who could benefit from it providing even more detection.
Thanks again.