How to detect screen size (e.g. large desktop monitor vs small smartphone screen) with CSS media queries?

Question

Consider two screens:

• same resolution
• same orientation
• but different physical sizes

Exempla gratia:

How can i target different screen sizes with CSS media queries?

Because, for example:

• for the one 1920px wide display, it is uncomfortable to read the long lines of text that stretch edge-to-edge, and you'd want some padding, margin, or other spacing to narrow the text
• but for the other 1920px wide display, you want text to go edge-to-edge

Bonus Chatter

And you can't try to invoke User-Agent strings:

• i'm asking about CSS media queries, not User-Agent strings
• the 4" screen could be connected to a PC
• the 18" screen could be connected to a phone.

And you can't try to weasel out of the question by talking about orientation, or by musing if the screen supports touch or not, nor can you use the handheld attribute

I'm asking about using CSS to style a page based on the (physical) size of the screen.

Bonus Reading

• Detect if a browser in a mobile device (iOS/Android phone/tablet) is used (tries to rely on resolution)
• Media Queries: How to target desktop, tablet, and mobile? (tries to rely on resolution)
• How To Build A Mobile Website
• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
• Using Media Queries For Responsive Design In 2018
• What media query breakpoints should I use? (tries to rely on resolution) ("breakpoints" is another word for "pixels")
• Media Query for Large Desktop
• CSS media queries for handheld and not small browser screens
• Media query about screen size instead of resolution

Answer 1

Well a typical media query for this would use min-width or max-width to hide or show things depending on display size. This is dependent on a <meta> tag which tells the browser to use the physical width of the display as the viewport width rather than using the resolution of the display as the viewport width.

For example:

<meta name="viewport" content="width=device-width"/>

and

@media all and (max-width: 600px)
{
    /*Put your mobile styles here*/
}

It's not a perfect solution and doesn't really account for touch interfaces for tablets or other larger mobile displays, but it's a good place to start for building mobile user interfaces.

It's important to emphasize that this is intended for displays in which the content is scaled. I know for fact that most modern mobile devices use scaling (2x/3x on iOS and xhdpi/xxhdpi on Android), but it should also work with Windows scaling, though I'm not 100% sure on that and don't have a way to test it at the moment.

These media queries can accept any CSS unit as well, so you could very well use actual inches if you wish.

@media all and (max-width: 3.5in) { /* ... */ }