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

Question

I have two devices that I'm testing site design with. Samsung Galaxy Nexus and Asus Nexus 7 tablet. I'm having a really hard time figuring out how to target these individual devices with media queries. I'm not sure about what values to use for max-width or to use max-device-width. Also I can't figure out what order to put the media queries in...

According to: http://responsejs.com/labs/dimensions/

Galaxy Nexus Portrait: document.documentElement.clientWidth = 360
Galaxy Nexus Landscape: document.documentElement.clientWidth = 598
Nexus 7 Portrait: document.documentElement.clientWidth = 603
Nexus 7 Landscape: document.documentElement.clientWidth = 966

I need to target the following:

Galaxy Nexus Portrait and Tablet
Galaxy Nexus Portrait
Galaxy Nexus Tablet
Nexus 7 Portrait and Tablet
Nexus 7 Portrait
Nexus 7 Tablet

I tried the following for testing but didn't have good results... Not sure what I'm doing wrong. I was kinda just playing around with the numbers trying to figure out what worked and what didn't...

/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
    ul.top-menu { background: red; }
}

/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
    ul.top-menu { background: blue; }
}

/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
    ul.top-menu { background: purple; }
}

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    ul.top-menu { background: yellow; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    ul.top-menu { background: green; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    ul.top-menu { background: orange; }
}

And FYI I know that you aren't really supposed to be so specific, targeting individual devices when doing Responsive Design, but I'm doing this mostly for as a test and need to do it in this case. Any help would be appreciated.

Why not just determine the minimum width at which your site does not look absurd, and have a single query for everything below that? You shouldn't need to target individual devices or screen sizes. — reisio, Sep 24 '12 at 00:51
I'm trying to do a query that works for 7-inch tablets (similar to Nexus 7) and a different query that works for large screen phones, like Galaxy Nexus or Galaxy S III or Galaxy Note. I can't figure out how, which is why I'm asking. It's important that the site looks different in each situation because a client is asking for this. — Jake Wilson, Sep 24 '12 at 01:54
Ah. Money is obviously a factor, but sometimes it's a good idea to explain to clients how they're wasting everyone's time. — reisio, Sep 24 '12 at 02:22
Well... A 7 inch tablet is a big difference from something like an iPhone 4s. The difference in screen size is huge... Are you saying that it's a waste of time to try to target those two types of devices separately? — Jake Wilson, Sep 24 '12 at 02:28
Yup. Either the resolution is smaller than the layout can support, or it isn't. (and I could go even farther and say you could just make a layout that supports any resolution) — reisio, Sep 24 '12 at 03:30
Ditto on the wasting time comments. The idea behind responsive design is that you design for the viewports, not the devices. If the interface on a mobile (galaxy or iphone) works just as well for the 7" pad then what is the point of changing it (apart from because you can). Start with mobile and start expanding your viewport. Once the interface looks bad you add a view port and change the styles, then start the process again. — justinavery, Sep 24 '12 at 21:47

Yoann · Answer 1 · 2012-09-27T15:00:27.220

I have a Nexus 7 and I have try your sricpt. The problem is that every browser have a different viewport. So it's complex to have a correct result.

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

I don't have time to make Opera.

You can view the result here with your Nexus 7

Last one doesn't work for me on the Nexus 7. According to responsejs.com it uses 961 width. — Sethen, Apr 26 '13 at 16:24
This code is two years old, maybe browser have change there viewport, I encourage you to shearch the correct new value. — Yoann, Feb 03 '14 at 08:48

score 2 · Answer 2 · answered Mar 07 '13 at 14:33

2

To specifically target you can use:

@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}

This will get the nexus 7 and if you have iPhone targetting media queries they will remain in tact.

answered Mar 07 '13 at 14:33

André Figueira

6,048
14
48
62

score 1 · Answer 3 · answered Jul 30 '15 at 18:59

Nexus 7 (v1) 2012

Mozilla/5.0 (Linux; Android 4.4.3; Nexus 7 Build/KTU84L) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Safari/537.36

@media screen
resolution: 192dpi/2dppx
color: 8
-webkit-device-pixel-ratio: 2

orientation: portrait
  width: 600px/37.5em/158mm
  height: 791px/49.4375em/209mm
  device-width: 600px/37.5em/158mm
  device-height: 960px/60em/254mm
  aspect-ratio: 600/791
  device-aspect-ratio: 5/8 or 758/1000
orientation:landscape
  width: 960px/60em/254mm
  height:431px/26.9375em/114mm
  device-width:960px/60em/254mm
  device-height:600px/37.5em/158mm
  aspect-ratio:960/431
  device-aspect-ratio:8/5 or 2227/1000

Nexus 7 (v2) 2013

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Sfari/537.36

@media screen
resolution: 127dpi/1dppx
color: 8
-webkit-device-pixel-ratio: 1.3312500715255737 or 1.3

orientation: portrait
  width: 601px/37.5625em/159mm
  height: 881px/55.0625em/207mm
  device-width: 601px/37.5625em/159mm
  device-height: 962px/60.125em/254mm
  aspect-ratio: 601/881
  device-aspect-ratio: 601/962
orientation: landscape
  width: 962px/60.125em/254mm
  height: 529px/33.0625em/114mm
  device-width: 962px/60.125em/254mm
  device-height: 601px/37.5625em/159mm
  aspect-ratio: 962/529
  device-aspect-ratio: 962/601 or 2221/1000

score 0 · Answer 4 · answered Apr 17 '13 at 19:32

You should try using a mix of inches for screen sizes and px for density/space

With this you can have a distinct layout for a galaxy nexus AND a nexus 7 without a bunch of lines for resolution!!

// High end Android device
@media  screen and (min-width: 600px) and (max-width: 5in)
{

}
// nexus 7 and ipad mini
@media  screen and (min-width: 7in) and (max-width: 9in)
{

}

Here an article about this: http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/

Shivanand Darur · Answer 5 · 2014-08-28T08:57:58.857

0

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

edited Aug 28 '14 at 08:57

answered Aug 27 '14 at 07:48

Shivanand Darur

3,158
1
26
32

score -2 · Answer 6 · answered Feb 01 '13 at 11:53

-2

The media queries that worked for me on Chrome on Nexus 7 were:

@media only screen and (width : 600px) and (orientation: portrait) {

}


@media only screen and (width : 961px) and (orientation: landscape) {

}

answered Feb 01 '13 at 11:53

Edwin Toh

163
1
2
6

using those queries will break any other targetting, so not particularly targetting just the nexus 7.... – André Figueira Mar 07 '13 at 14:19

score -3 · Answer 7 · answered Sep 24 '12 at 00:23

-3

you can use the and expression to use multiple rules to the same media query

@media screen and (min-width: 998px) and (max-width: 999px)

target any between 998px and 999px

answered Sep 24 '12 at 00:23

Samuel Charpentier

599
1
7
28

1

Why wouldn't I use `min-device-width` and `max-device-width` instead? I'm confused on when to use the write ones... – Jake Wilson Sep 24 '12 at 00:47
When you Type in "and" between two conditions they are both conditions at the same time to the execution of the media queries So if you want to select some thing that have the size of 965px for example you use; @media screen and (min-width: 965px) and (max-width: 965px) and you are set! – Samuel Charpentier Sep 24 '12 at 05:57
2

I think Jakobuds point was around setting the width of the device instead of the viewport, not around the use of the and. – justinavery Sep 24 '12 at 21:51

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

7 Answers7

Nexus 7 (v1) 2012

Nexus 7 (v2) 2013

Linked