Watch screen orientation


#1

Hello all. It might look like a silly question, but I can’t find an answer… I’d like to check the current screen orientation, in order to add and remove css classes according to it, but I really can’t find a way. Can someone point me to the correct answer?

Thanks!


#2

You know I was looking to achieve the same thing… It’s difficult because I couldn’t find any events to specifically listen for it. The most up to date plug in and the one I’m using is https://github.com/yoik/cordova-yoik-screenorientation

What you might be able to do (I haven’t tried it yet, just haven’t gotten to that specific part of my app yet) is use Angular to $watch the screen.orientation and check if it changes.

I’m sure you can achieve a pretty good result with that. If you want to get fancy try fading in the new elements on a time out and that will make it look a lot smoother.

Good luck!


#3

Yeah, i found that plugin too… I had trouble installing it, but tried again and now it seems it’s installed. I’ll give it a shot. Thanks!


#4

No problem let us know if it works out, I’m curious haha.


#5

well… it was as simple as

window.addEventListener("orientationchange", function() {
        //do whatever you like
        alert(screen.orientation.angle);
    })

hope this helps


#6

I didn’t see that anywhere! You’re a life saver. Thanks for sharing!


#7

Sorry, the @media label does not serve css files? Could set limits and thus load different styles depending on resolution


#8

well, I guess you’re right. Probably it’s even more clear, and I think will be enough in my case. I’ll give a shot to that solution as well.


#9

True, however there are a lot of things like dynamic data that may need to be loaded. Example: In my app when you rotate the screen it is going to load and pull data for a type of graph that will be shown that’s not visible in the other view.

Though for simple ui stuff, the media might work really well.


#10

Well that could be solved with CSS properties, classes in a hidden resolution and another does not. I think it’s the easiest way, do not know any method that identifies what you need. If anything, I said.