How do you ignore the Android keyboard at the viewport?

Question

In my code "ABS-CBN News", I've set different layouts for when the screen is at portrait or landscape and it registers as landscape when width > height. However, even when the phone is clearly at portrait, the presence of the Android keyboard when focusing on an input box reduces the viewport height, so now it registers as landscape and thus, the format changes that should have been done on landscape are being applied to portrait just because the Android keyboard is there. Is there any way to ignore the Android keyboard at the viewport so that the portrait/landscape conditions would be more accurate? Or can i do something else to achieve the result i desire? Thank you in advance to anyone who takes the effort to answer my question :>

Answer 1

I had just recently started learning JS, so when i made the code i used this on CSS:
@media only screen and (orientation: landscape) {}

PS how do u reply here :'<

Answer 2

did u write something like
if (window.innerHeight < window.innerWidth){
//this is landscape mode
//do something else
}

in ur js to know if it is on landscape mode?

Answer 3

oh..it thought u change it through js..
but i think there is alternative way to know phone orientation, called "aspect-ratio" i think..
i dont quite remember cause i rarely use it,but u can search it on google,there must be solution