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!

2
  • Post your media definitions. Do you really need to check orientation/height? Width is usually enough.
    – Malk
    Apr 19, 2016 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, 2016 at 19:56

2 Answers 2

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.

0

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

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

@media (min-width: 481px)
 {
  /* multiple rows menu */
 }
3
  • 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, 2016 at 14:41
  • So use EMs instead? Still, forget height.
    – Malk
    Apr 28, 2016 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, 2016 at 21:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.