Responsive image media query not working Nexus 7

Question

I'm running into the following problem.

I'm using bootstrap and bootstrap uses to following media queries:

/* Extra small devices (phones, up to 480px) */
@media (min-width: @screen-xs) { ... }

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

Now it seems to work perfect on everything, but I'm having problems on a Nexus 7. It takes the extra small devices query instead of the small devices query.

Am I doing something wrong? Should I use different queries?

Answer 1

I'm not so sure since i have not try it yet, but you can give it a try

@media only screen and (min-device-width: 800px) and (orientation: portrait) {
  #device:after {
    content: "Nexus 7 - portrait - firefox";
  }
}
@media screen and (min-device-width : 602px) and (orientation: portrait) {
  #device:after {
    content: "Nexus 7 - portrait - chrome";
  }
}
@media only screen and (min-device-width : 1280px) and (orientation: landscape) {
  #device:after {
    content: "Nexus 7 - landscape - firefox";
  }
}
@media only screen and (min-device-width : 966px) and (orientation: landscape) {
  body {
    background-color: #008000;
  }
  #device:after {
    content: "Nexus 7 - landscape - chrome";
  }
}

reference:

How to target Galaxy Nexus and Nexus 7 with media queries?

Answer 2

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"/>