Watch screen orientation

ionic-v1
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

1 Like
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.

1 Like
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.