2

For my website I want to create some divs that measure roughly 1cmx1cm in smartphones and 1.5cmx1.5cm in tablets and computers. (I'd pick a width and height for several dpi intervals)

From what I've read and if I understood it correctly just querying the resolution won't work, some high dpi smartphones have almost the same resolution as some computers.

1 - But from all the examples I found, most people query px and don't query using dpi, why is that?

2 - In high dpi computer screens we now use the Desktop Display Scaling, so how to know when the browser is scaled?

3 - Is there a way to do this?

Edit: I won't use in any way centimeters, I'll use certain px or % for several dpi intervals. I used the cm as a way to show why I need to query in dpi.

JCML
  • 99
  • 1
  • 12
  • possible duplicate of [Detecting the system DPI/PPI from JS/CSS?](http://stackoverflow.com/questions/279749/detecting-the-system-dpi-ppi-from-js-css) – Terry Apr 08 '15 at 20:38

1 Answers1

1

In your style sheet you can do:

@media all and (-webkit-min-device-pixel-ratio: 1.5) {

}

People use that for serving hi-res images, and it is still detected on desktop displays.

To make sure mobile devices render the page the width of the device, you need to add the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Remember tablets are often hi-dpi. Also The reason people still query viewport with, i.e. @media all and (max-width: 320px) is because 320 pixels is still 320 px no matter what pixel density. It will be the same size.

Since you're designing for screen and not print, trying to use physical units like centimeters is a bad idea. Stick to pixels and ems.

inorganik
  • 24,255
  • 17
  • 90
  • 114
  • The thing is that I want to design a button. Even if px are always px I don't want the button to be too small on a smartphone. And then I don't want it to be too big on a tablet or computer. – JCML Apr 08 '15 at 20:57
  • @JúlioCésarLuta Like I said, 320px is the same on a smartphone or a low-res desktop monitor. – inorganik Apr 09 '15 at 03:37
  • I already have the buttons made and I already have seen the results... buttons too small on smartphones and almost impossible to use while on low res desktop monitor they are bigger. Either something exists that adjusts and scales the px and you are assuming that I know of it or you are not understanding what I'm saying. – JCML Apr 09 '15 at 10:50
  • @JúlioCésarLuta It's probably the relative size of the view port that's making them seem smaller or larger. What units are you using? – inorganik Apr 09 '15 at 13:45
  • My first test that failed horribly when I tried it on an iphone is hosted here: http://web.tecnico.ulisboa.pt/jcml/4/ I used 51 px in this one (looks good in my 1440p 13" laptop with display scalling), ems can also be used for this purpose? – JCML Apr 09 '15 at 14:16
  • @JúlioCésarLuta I just looked at your site on my iPhone and found the problem. The iPhone is rendering the page at 980px wide, because you are missing the viewport meta tag. Try adding this: `` The key there is `width=device-width` I'll edit my answer. – inorganik Apr 09 '15 at 15:08
  • Thanks. When I have the chance I'll use it and accept your answer. Quick followed question if it's not much trouble. Will that also change how the size of the font will render in devices like the iphone? (I'm using ems for the fonts already) – JCML Apr 09 '15 at 15:37
  • @JúlioCésarLuta it will just change the width that it renders the page – inorganik Apr 09 '15 at 17:55