PPI or pixels or something else for media recordings on HD screens?

Question

I do some doodling with a responsive design (Finally, right?) And asked myself a question using media queries: "What happens when I use this on the retina screen?"

So, I began to wonder if pixels should be used correctly when setting up HD screens. I mean, @media only screen and (min-width: 5 billion px) seems like a dumb thing.

So, I wondered what is best practice. Is the PX scale on HD screens? Or should I use DPI or device-pixel-ratio or maybe something completely different?

My goal is to target almost all screens on a mobile-only page. Purely for practical purposes and for yourself, which is possible and logical.

My question to a large extent is this: how can I set up HD target screens besides the “normal” screens in a universal solution, where I can make exceptions for HD and ordinary Def screens built for the “future”.

Answer 1

Usually you use relative units such as em or % .

For example, if everything on your page uses em , changing the font-size body will automatically scale each element in proportion to the font size.

In other words: you have to encode media queries for resolution ranges and just adjust the topmost font size (for example, the body of the document) depending on the screen width, and the rest of the styles should be outside these media queries, since a simple change in font size automatically scales the whole page because font-size has changed.

By the way, I doubt that min-width will ever be "billions of pixels". At the moment, resoultions do not go beyond 4K on consumer and most professional screens (4096x3113). That is, I don’t think you need to use the billionth media query!

Answer 2

Well, 160 DPI is the basis for PX screen density - since it is a 1: 1 PX screen for a PX device. The Retina display is a PX 2: 1 PX screen for a PX device with a resolution of 320-330 DPI.

So, if you are only focused on getting it to work on Retina

 min-device-pixel-ratio: 2; min-resolution: 192dpi; 

It should be good. However, Android, for example, supports a number of devices with a different DPI; including 160 DPI ("mdpi"), 240 DPI ("hdpi"), 320 DPI ("xhdpi") and between.

Edit: Added example below.

 @media only screen and ( -webkit-min-device-pixel-ratio: 1.25 ), only screen and ( min--moz-device-pixel-ratio: 1.25 ), only screen and ( -o-min-device-pixel-ratio: 1.25 / 1 ), only screen and ( min-device-pixel-ratio: 1.25 ), only screen and ( min-resolution: 200dpi ), only screen and ( min-resolution: 1.25dppx ) {} 

Answer 3

I assume that you are using the standard practice of setting browser scaling via meta viewport (or for non-WindowsPhone8 IE10, @ ms-viewport) width = device-width.

In this case, the CSS “px” units that you specify in your requests for width and height will come very close to one physical pixel on the 160ppi screen, regardless of whether it is a high PPI or not. In fact, it can range from ~ 130ppi to ~ 180ppi.

So, if you agree with this inaccuracy in the size of the physical screen, which will correspond to the media queries of width and height, go straight ahead. Just make sure that you allow the “css layout px” hardware developer to scale the “physical pixel” that is available to almost any modern mobile device in one way or another.

Note. You can also rely on some clever javascript to get more accurate PPI readings from clients. Currently, I am doing this in order to get a single PPI value both on mobile devices and on the desktop - a task that can become messy (think that the desktop “Page Zoom” versus “View Zoom” and “System Zoom” "), considering that at present all non-IE browsers have similar problems due to their errors, indicating a serious architectural split between mobile and desktop computers with respect to pixel scaling / scaling / aspect ratio / independent at