2

Often see people give DPI resolution on his Media Query for mobile. What is it for? Does it serve a purpose? Do we need it?

I normally build my media queries for all devices (desktop, tablet and smartphone) like this:

@media only screen and (device-width: 22.5em) 
               and (device-height: 40em) 
               and (orientation: landscape )

@media only screen and (device-width: 22.5em) 
               and (device-height: 40em) 
               and (orientation: portrait )

Should I also be using DPI resolution (eg min-resolution: 192dpi) in my media queries for mobile in some cases?

2

This might not be a real answer, just an opinion.

Every web developer should decide if they "need" a feature.

In my opinion, the unit itself is a bad implementation.

DPI is a unit intended for print, specifically a unit to measure the capability of a printer to produce a small dot.

But in electronic mediums we have not a dot, we have a pixel, which has different characteristics than a dot.

A dot can not change its color, it only can be either printed or not printed. It is a yes-no state. A pixel can have any of, let's say 16000000 possibilities.

But that is another story.


To be useful, the device must declare the resolution to the webpage. Most web browsers now support the unit, but I am not sure how many devices declare the resolution. To decide if you "need" to use it you need to know your target audience. The unit is intended to provide more control, but currently, I believe it is not necessary.

  • Thanks for your explanation, how I to see, I think is best not implement it, because can to come different outcome as I to want.... – biotza Dec 17 '19 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.