Problem making me rethink how I do media queries…help!

[evanjackson]

Hello! I have a web app set up with responsive design, and so far it’s been working great. We have a bunch of devices around the office to test, and things have been going very well until I tested on our newest tablet: HP Slate8 Pro. Up until this point, I’ve been using 1024 as a major breakpoint between mobile and desktop media queries. Resolutions have been increasing over the last few years, but this breakpoint has been fairly reliable as changes have effected pixel density rather than resolution.

Enter the Slate8 Pro. It’s a standard 8 inch tablet, but the resolution is 1600×1200. Normally, I think this would register as 800×600 with a 2x pixel density, but in this case it’s just being seen as 1600×1200 and none of the media query styles are being applied.

So my big questions are these: have any of you experienced this issue? How did you get around it? Also, if more of these new tablets use this new paradigm for resolution where does that leave the current methods that we use for responsive design?

[lukefrake]

Hello Evan,

I’m not sure I fully understand your question, but you could try using the DPI media query to get around your problem?

https://css-tricks.com/snippets/css/retina-display-media-query/

Hope this helps.

[evanjackson]

Thanks for the reply. Sorry, my post is kind of unclear, essentially what I’m saying is that up until this point all mobile devices have used the same way of measuring resolution, and as resolution increased only pixel density has changed. For instance, a non-retina iPhone and a retina iPhone both have the same width resolution (320).

This new tablet seems to ignore pixel density. So, a width resolution that, on another device, would be seen as 800 pixels with a 2x pixel density, is simply seen as having a width resolution of 1600 pixels. This is making it hard to target with media queries.

This is concerning to me, as using this different way of defining device resolution seems to have the potential to undermine how responsive design and media queries are currently handled. There’s probably a reasonable solution (or something I’m just overlooking, or this device may just be an anomaly), but I wanted to present the question because virtually everyone who uses this board is much smarter than I am and might have already run into this.
Thanks!

[lukefrake]

Ahhh I see what you mean, and agree this is a worrying sign.
Technically the way pixels work at the moment in retina devices is a massive hack that apple put in to stop everything from going crazy once they supported retina.

I would hope that this is just a bug in the slate Pro! :)

[evanjackson]

I think “This is just a bug in the Slate Pro” is going to be my position (and hope) until I start seeing it anywhere else. :)

Thanks!

[Senff]

Up until this point, I’ve been using 1024 as a major breakpoint between mobile and desktop media queries.

I think this is one of the biggest misconceptions in responsive design: that you have to use a “proven” number as a breakpoint.

In my opinion, the breakpoint totally depends on the design in question. You should set your breakpoints where your design actually “breaks”. This can be at 1024 wide, but maybe it’s at 1211, or maybe at 1371, or maybe at 934? Resize your browser window and notice where something goes wrong.

Make sure everything looks good at every single width. Sometimes this takes one breakpoint, sometimes a bit more.

That way, you’ll be all set when a new device comes out that happens to have a weird random resolution, like 1290 x 723.

Here’s a very random example. Let’s say this is your design: http://codepen.io/senff/full/JaxvL
There is a breakpoint set at 568px, which is a “common” breakpoint, seeing that is the iPhone 5 landscape width.

But resize the window and you’ll see that the layout breaks around 600 pixels: window gets any smaller than that, and the last item wraps. Make it even smaller, and you’ll get your mobile menu at 568 width. But…yeah, there’s this zone between 568 and 600 where the menu just doesn’t look good.

You might think “yeah but on iPhone it will look good because that’s 568, so that breakpoint will be applied fine“. Thing is, what if the next device you’re using has a screen width of 590?

It’s a very extreme example, but it shows why “common” breakpoints shouldn’t be used blindly. In this very case, I would set the breakpoint at 620 — always higher than where it breaks. That way, it will always look good, whether it’s below 568, or above 620, or anything in between.

[Author]

Posts