Media Queries Firing When They Shouldn't

[Porter]

I thought I understood media queries (there's not much to them), but apparently I don't, or something odd is happening. I've built my site using the Genesis Sample theme, which has queries for 1200px, 960px, and 800px. When I put code in the 800px section, it's being read on my Nexus 7 tablet which has a resolution of 1920 x 1200 - that could shouldn't be read, correct?

I'm simply trying to make my footer fit, or hide certain elements when on mobile, but the media queries are firing at resolutions higher than the query states. Any ideas?

anightinburlington.com

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[David Chu]

Hi,
Ah, Burlington... I was just there and had a great fun meal at El Cortijo. 🙂

That's a very interesting question. I think you could say that there's resolution, which is like an ideal, and then there's actual screen width, which is less, and of course varies between portrait and landscape. So that's a long way of saying that the "narrower" queries may indeed fire on the Nexus, although I don't know the exact figures.

Here's some good info on that complicated topic:
http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Hope that helps,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Porter]

Hah, glad to see someone who knows the area / what I've been up to with this website 🙂 I've yet to eat at El Cortigo, but I've heard great things - I've got quite a few restaurants to catch up on before next spring haha.

As for the issue, I did some more testing, and I'm even more confused. I discovered this:

@media only screen and (max-width: 600px) {

The code is read with the above 600px value as the size, but at 599...

@media only screen and (max-width: 599px) {

it isn't read, and displays at it's native resolution of 1200x1920 (portrait mode). Given those numbers, there seems to be a built in zoom of some kind, that appears to be 2x. That being said, I'm confused as to why the code is executing instead of the other media queries, such as the 960px, or the 1200px. I obviously need to do some more testing, but this is definitely not behaving how I believe it should. For the sake of problem solving, my accelerometer is broken on this tablet (I open apps to change orientation), but I don't think that should matter, unless it's responsible for providing this value somehow.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[David Chu]

Yeah, I may be heading to VT long-term at some point, love it there. 🙂

I hear ya. I had to do tons of testing and experimentation to grasp this stuff, and I'm still learning. At some point along, you'll get a general scenario that you're comfortable with, and you can use that as a base. If you hunt for experts who have a good media query boilerplate type of thing, you might find one that resonates with you.

Apart from that, you can actually aim for particular devices, resolution, and other surprise variables. But to me, that's almost getting too far into an endless chasm. Here are some examples:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

You can also read the HTTP header, and if it's not spoofing, you can offer different output, handling that through PHP code, jQuery, or other means to get almost absurdly specific. Crazy, eh?

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Porter]

There's definitely plenty of options, but as you said, too far down the chasm for me.

It works great on PC, it's behaving properly on the Kindle Fire HD in both landscape and portrait, and it behaves fine on the Nexus when in landscape mode (do people even hold tablets in portrait mode when not reading books?), good enough for me. I'll be grabbing a high-end smart phone this Black Friday, so I'll have yet another device to test then. I've got plenty to do in the mean-time, so I'm not too worried about, just overly curious haha.

Thanks a lot for taking a look, be sure to check out the site in the coming months - it should serve useful for visiting / living here!

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[David Chu]

Good idea about the site, thanks.

Yeah, it's a rabbit hole. I have language in my FAQ that un-guarantees being able to support every single device and gesture on the planet! But I can get most of 'em.

Ciao,
D

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Porter]

Seems I spoke too soon, my Kindle Fire HD is also displaying an odd width (somewhere around 420 from what I'm seeing), rather than 800px. If anyone has any info on how Genesis behaves on these mobile browsers, and what's causing these odd sizes, I'd love to hear it. For now, I'm switching to % where I would set sizes (should have done that in the first place), and working with what I have. I'll also try another browser, maybe that will show different results.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

Further update on what media query pixel values work on which devices:

Kindle Fire HD (Portrait mode, 800px) - 534px is the cutoff point, 533px is not read.
Nexus 7 2013 (Portrait mode, 1200px) - 600px is the cutoff point, 599px is not read.

I set my mobile navigation to 400px, took a screenshot, and the area took up about 75% of the screen (it should take up half, 400px is half of 800px). I looked at the image in GIMP, and the 400px area is actually 580px - absolutely no padding or anything.

I put in a support ticket, but I figured those values could be of use to anyone who may know what's going on.

UPDATE

I found a mobile device emulator site, and saw some info that state a different "css resolution" than the normal resolution. Reading time~

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

So I figured out the first part, apparently media queries and how the browser determines the width and height is a lot more complicated than I thought, it's not simply the resolution of the device. This website will show you the values you need for the device you view it on - simply visit it on your device, and there are your numbers.

My only issue now is for some reason, the Nexus 7 reads the final media query no matter how high I set the value (100000px, for example). It uses that "tier" no matter how high I go, but not if I go below the minimum (533px). If I go below the minimum, it uses the next tier up, in this case, my 960px. Why would it not use the 960px tier when I set the 800px tier to 100000px?

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts