Adaptation of CSS depending of screen resolution and size of screen

Question

Currently working for a client which ask to adapt interfaces on two different screen which have a resolution of 2560x1600.

The problem is that theses both screen have the same resolution but not the same screen diagonal. Indeed, one got a 27" diagonal and the other one... 9".

So it's pratically impossible to read elements on the 9", that's the reason why I need to adapt the elements on this specific screen.

Initially I was think about using DPR (device pixel ratio) which I supposed aren't not the same... But it's not. Both of theses have 1 DRP.

So I not able to use CSS media query rule.

@media (min-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.5) { ... }

Anyone have an idea ?

Thanks

Answer 1

You can set the viewport to handle this.

<meta name="viewport" content="width=device-width, initial-scale=1">

There are various settings you can adjust such as min,max scale and device-height.

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

https://css-tricks.com/snippets/html/responsive-meta-tag/

Answer 2

When working with responsive html and css, don't bother with DPR.

@media (min-width: 2560px) { ... }
@media (min-width: 1980px) { ... }

You can use min-width for a mobile first responsive design or a max-width for a desktop first responsive design:

@media (max-width: 2560px) { ... }
@media (max-width: 1980px) { ... }

Recommended responsive steps are 1200px, 992px, 768px and 576px. And of course you need the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">