Member Avatar for RikTelner

There is screen A and screen B. Both screen are same physical size in length and width. Just one is 1920x1080 and another size is (I think) 800x640.

See, if I make query for 1920x1080 mobile, this will also trigger on computers having same resolution. That does not mean, that what fits on computer screen, will surely fit onto mobile screen.

What I need is, create a website for screen that are that physical size, not that amount of pixels. Because pixels count doesn't matter actually, only physical size, it's physical size after all that tells vw, em and % how big they are, not the pixel count (there's slight and really narrow difference).

If tell script to activate this part of stylesheet if this is the size. We'll surely know that it's a MOBILE and SURELY nothing else. You can't expect that from pixel count apparently, because, (sucks to be me), mobiles have 1920x1080, my laptop has 1366x768 xD

So, is there "@media max-physical-width: 18inch;" in CSS or anything alike.

Edited by RikTelner
  • 4 Contributors
  • 5 Replies
  • 478 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by RikTelner

Dani AI

Generated

Short answer: there is no reliable CSS media feature that tells the browser "this screen is X inches wide" in the physical sense. Media queries and CSS lengths operate on CSS (logical) units, not the device's real-world inches, so queries like min-width: 18in are interpreted using the CSS unit mapping (1in = 96 CSS px on typical screens) rather than true physical inches. (developer.mozilla.org)

The observation by that a device has two “resolutions” is correct: device (hardware) pixels and CSS (logical) pixels differ because of the device pixel ratio. A phone with a 1920×1080 hardware grid often reports a much smaller CSS viewport (e.g. 360×640) so targeting CSS pixels (the logical viewport) is the right approach. (developer.mozilla.org)

As noted, JavaScript can read screen.width / screen.height and window.devicePixelRatio, but these values are logical/CSS pixels and user agents vary in what they expose; relying solely on JS or on device detection is brittle (and, per , can fail if JS is unavailable). window.screen and devicePixelRatio are tools you can use if JS is allowed, but they don’t magically give a universal physical-inch measurement. (developer.mozilla.org)

Practical recommendation: design to content, not to physical device sizes. Use CSS breakpoints based on when the layout breaks, add density-aware rules for HiDPI (resolution: 2dppx) and prefer container queries for component-level adjustments. Example patterns:

/* logical (CSS px) breakpoint for small viewports */
@media (max-width: 480px) { /* mobile layout */ }

/* device-pixel-density tweaks */
@media (min-resolution: 2dppx) { /* HiDPI images/fonts */ }

Test on real devices or reliable emulators and use content-based breakpoints and container queries instead of trying to detect physical inches. (developer.mozilla.org)

Recommended Answers

All 5 Replies

Member Avatar for rtrethewey

Actually, it is resolution and not the physical size that counts and the fact that the device's physical dimensions are not available to the browser should convince you that you need to adjust your approach.

Go find a couple of tutorials on responsive design and you should find things get easier. Good luck!

Member Avatar for mattster

You can get this information in the javascript screen object.

Then you can apply CSS classes from there.

Member Avatar for RikTelner

You can get this information in the javascript screen object. Then you can apply CSS classes from there.

What a pity, our teacher of HTML, has forbidden us to use anything except HTML and CSS. :(, he likes to be pain in the butt.

Member Avatar for almostbob

javascript does not work in some devices, If your code depends on js it may fail
thats the teacher's reason, pain in the butt is an added bonus (for him)
javascript screen object
roughly equates to <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Sorry I don't have a solution, but
David Calhoun is 99.999% guru

Edited by almostbob
commented: Now there's a gem for the bookmark folder! +5
Member Avatar for RikTelner

Solution is accepted regardless. Although I came up with my own solution.
Apparently, every device has two resolutions pixel resolution and CSS resolution. That means that if you make website for that certain CSS resolution it will look perfectly corresponding to bound pixel resolution. Based on topic:

Samsung Galaxy S5 (mentioned in topic)
Pixel resolution: 1920 by 1080
CSS resolution: 360 by 640

So, if you make @media for 360 by 640, it won't trigger on screens that are FHD (1920x1080).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.