responsive design: do pixels even mean anything?

[cellio]

I don't know a lot about the nuts and bolts of responsive design (the "how", I mean), but Stack Exchange is moving toward it so I'm starting to pay attention.

Meanwhile, my ancient tablet seems to be in its death throes, so I've started to look around at what's out there these days, and I realized something. I'm looking at some 10" tablets with resolutions like 2048x1536. My 30-inch monitor at work is something like 2500px wide. These are, of course, not even remotely the same size pixels. Pixels have always varied with the size of the monitor, of course, but a ~10" tablet used to be in the range of 1024 or 1280 wide (landscape), not twice that.

I've seen discussions of SE's upcoming responsive design that say things like "and at widths under 900px it does this" and "the max width for the content area is (some number of pixels)".

How does this work? How can I see reasonable "real-world" sizing of things on both my big monitor and my tablet when designers are measuring things in pixels and tablets are doing crazy-dense things with pixels these days? I guess the same can be said of 4k displays (which I don't have). Do these ultra-dense devices somehow tell the browser "no, really, treat me as half that for layout purposes"? On a tablet will I need to have tons of zoom -- but still struggle to see the actual application's controls, because those don't zoom when you make content bigger?

I must be missing something obvious. Anybody want to enlighten me?

Comments

[durham_rambler]

shewhomust has drawn your post to my attention. Let's get techy...
There is a meta tag, viewport, which controls how things are displayed. On this Dreamwidth page it is
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The width=device-width tells the browser to use the actual width of the screen to render the web page. Without this, a mobile device would probably render the page on a width of around 980px then compress it to fit the screen, combining several pixels together.
The other parameter, initial-scale=1.0, tells the browser to render the page so that one pixel on the page equals one pixel on the screen.
If you search on meta viewport there's a lot more information out there. This page on the Google site has an example of a web page with and without a viewport tag.

But this relates essentially to displays on smartphones. These very wide devices must be doing something under the covers to scale the pixels with a default initial-scale of less than 1. The benefit of a wide screen must be smoother pictures and text.

Style sheets can contain media queries to render differently on screens of different sizes. You can use this so that the “hamburger” symbol ☰ displays on smaller screens: on larger screens that part of the page has a style of display:hidden

I hope that helps…

[cellio]

Thank you! For both the explanation and the vocabulary (search terms). "Viewport" is one concept I was missing, and I was dancing around "scale" with things like "variable size".

I hope that a 10" tablet with a width of 2k pixels is similar to the phone case, but it sounds like I should find some way to confirm that before investing in one. That form factor is pretty common now so it's *probably* ok, but most people's vision is better than mine so I want to investigate.

[dsrtao]

https://webplatform.github.io/docs/tutorials/understanding-css-units/

TL;DR: The CSS "pixel" is an abstract unit used to draw on a web page. No matter what the device resolution is, CSS asks it to map 96 pixels to one inch of real world. The system may decide to present it a little differently.

Similar things happen in most GUIs.

[cellio]

Thanks!

Heh, in 2001 I went to work on a visualization platform. It had the concept of a "p-unit"; things in the UI were measured in p-units and p-units were converted to pixels. But eventually people decided this level of abstraction wasn't buying anything and it was always going to be 1:1 so let's just talk to users (designers of visualizations) in words they already knew. Years later, mobile devices arose... This is not the only area where that product was ahead of its time but didn't follow through, alas.

[mdlbear]

Yeah; this is the key piece of information: CSS pixels aren't real pixels; it's up to the device to figure out what they translate to. Printers do something similar: postsript and PDF measurements are all in "points", defined as 1/72 of an inch.