Not to mention lower height when in landscape mode. Websites that don't disable sticky headers (or other elements) are useless because those fixed elements now take up most of the screen.

Those sites are useless on desktop too. I usually just leave if element blocking isn't simple enough.

Your story isnt important enough to deal with God awful UX.

But that seems to be most sites these days. I have this bookmarklet invokable with a keyboard shortcut:

javascript:let i, elements = document.querySelectorAll('body *'); for (i = 0; i < elements.length; i++) { if(getComputedStyle(elements[i]).position === 'fixed' || getComputedStyle(elements[i]).position === 'sticky'){ elements[i].parentNode.removeChild(elements[i]); } }

That zaps fixed and sticky elements, so I can actually see the content. (I like the Vivaldi browser because I can assign keys to many things.)

You shouldn't be specifically "considering mobile" to remember to include your aspect-ratio queries (or to fix your headers.)

It’s lower width (and height) because the screen is smaller. Remember that in CSS, px is not a physical screen pixel. It’s actually defined in the spec as an angular size[1]. In practice users might adjust their display preferences to suit their eyes. I would not recommend trying to compensate for physical display size, and instead let the user and the browser handle that.

Resolution can be targeted with other media queries, which should be useful for other high-resolution devices. And separate from this you should target touchscreens with a `pointer: coarse` query.

This is exactly why you should not think in terms of mobile, tablet, desktop, but instead in terms of features of the output media.

1: https://www.w3.org/TR/CSS22/syndata.html#img-pixel1

Also: mobile generally requires an interface that is touch-friendly, with e.g. larger buttons.

It doesn't make sense to spend time designing touch-unfriendly elements on narrow widths for mouse users.

What about Ipads? Mobile, but also big?

Just do your user research to see if it’s worth detecting non-touch input and resize elements. If you do this, you’ll be doing it for all larger widths, not just your guess at tablet. You don’t want to do it based on device detection because so many tablet users prefer keyboard and trackpad input (but again, try to find that out for your app/site’s user base.)

Lots of “gotcha” questions being asked that are symptoms of less-than-thorough responsive and multi-device development, I have to say…

True. We usually do raster content 2x at all widths, and size everything in pixel-independent units. But you are right that thinking in that abstraction doesn't cover all the work.