Currently I'm working on a webApp which will be displayed on two different TV screens. One will be in landscape mode, and the other one will be in portrait mode. So, I coded this app with CSS media queries to make it adaptable in those two configurations and for different resolutions.
I used queries like this for example:
@media screen and (orientation: portrait) and (min-width: 2160px) {
}
@media screen and (orientation: landscape) and (min-width: 3840px) {
}
The application is working perfectly fine on browser. But when I try my app on vertical screen, obviously the TV display it on landscape mode (because this is just a screen which is rotated). But the problem is, when I change the parameters on TV options to display the image as portrait, the app has just rotate and the image has expand to the border of the screen. None of my CSS media queries has done this work like on the browser.
If someone have a technical explanation and/or solution, I'm looking forward to hearing from him/her.
Thanks
