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
  • 377 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by RikTelner
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 here are some hints
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.