0


I've ran into an interesting problem. On my website I have two versions of navigation bar for mobiles - landscape and portrait. To detect these two I use CSS media orientation.

@media (orientation: landscape)
 {
  /* inline menu */ 
 }

@media (orientation: portrait)
 {
  /* multiple rows menu */
 }

However, when I open my keyboard page turns into landscape, because the actual page size becomes smaller.
Can someone help me how to fix this? All I can think about is focus event on inputs, so whenever they're focused the portrait manu is turned on, but it would change the menu even on landscape. Here's an illustrative image Portrait/Landscape/Portrait with keyboard

Thanks!

Kuxa
  • 187
  • 1
  • 9
  • Post your media definitions. Do you really need to check orientation/height? Width is usually enough. – Malk Apr 19 '16 at 19:46
  • I don't know what you mean by checking width. I find my way (added to post) the easiest detection possible. – Kuxa Apr 19 '16 at 19:56

2 Answers2

1

If you check Media Queries W3C Recommendation

You will find this interesting sentence:

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

So, when the keyboard is opened, your page turn into landscape mode.

There are multiple ways to overcome this problem, you can check this answer.

Community
  • 1
  • 1
Ygalbel
  • 5,214
  • 1
  • 24
  • 32
0

You should ignore the height/orientation completely. Something like this:

@media (max-width: 480px)
 {
  /* inline menu */ 
 }

@media (min-width: 481px)
 {
  /* multiple rows menu */
 }
Malk
  • 11,855
  • 4
  • 33
  • 32
  • Thanks, but I don't want to. I use EMs and %s as units for the navigation bar so I don't want to mess with pixels. – Kuxa Apr 28 '16 at 14:41
  • So use EMs instead? Still, forget height. – Malk Apr 28 '16 at 16:08
  • 1
    I don't care about neither height nor width. I use _orientation_ media query. Cause if some tablet would be wider than 480px in portrait, your sollution would show landscape even in portrait, if you know what I mean. And that's not what I want. – Kuxa Apr 29 '16 at 21:34