Nexus 7 and media queries not working correctly

Question

I am trying to work on my responsive design for my website and would like the menu to move to a more mobile friendly version. When I add the media query for my nexus 7 it does not work as soon as I move to the page but if i scroll down and back up it works! Also if I change the orientation (landscape to portrait) it will work! But if I go to a new page on the site it will do the same think.

It is also adding a "#" at the end of my web address when I try to navigate the menu in the non-responsive menu.

The website is "www.tripspotr.com" if any one wants to try it themselves.

Thanks for your help!

Have you tried adding `initial-scale=1` to your `viewport` meta tag? So it looks like: `` — Jack, May 14 '14 at 02:58
What browser are you using on the Nexus? The Android browser, or something like Chrome for Android? — Qix - MONICA WAS MISTREATED, May 14 '14 at 03:09
And no I have not tried that for my meta tag. The thing that I do not understand is why it will apply the correct once I move down the page and then back up? — joshuap.smith12, May 15 '14 at 03:30

score 0 · Answer 1 · answered Aug 28 '14 at 08:59

Following code worked for me to target Nexus7 tab.

/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}

Don't forget to add the meta tag in your html. For example,

<meta name="viewport" content="width=device-width"/>

Nexus 7 and media queries not working correctly

1 Answers1