JS or CSS: How to detect phone orientation? Horizontal? Vertical? Media queries? JavaScript?

Question

css

What is the most correct way to determine the phone's sweep on the fly. It is required to display a message about the need to turn the phone if it is located vertically and remove it if the phone is turned.

Answer 1

@media screen and (orientation:portrait) {}
@media screen and (orientation:landscape) {}

Answer 2

caniuse.com/#feat=screen-orientation
I don't even know... there is a csse

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

but as you can see, ios safari is in no hurry to digest this matter.