In css media queries, Device Pixel Ratio or DPR is not working for different DPR screens

Question

Different DPR not working with media queries

tried with different DPR. But not working

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 1.6) {
max-resolution: 1.6dppx;
}

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 2) {
max-resolution: 2dppx;
}

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 3) {
max-resolution: 3dppx;
}

DPR 1 to 1.5 is working correctly. But DPR 2 and upper values, used in iphone X, iphone 6/7/8 plus are not working. Already working for desktop resolution without having any problem

Possible duplicate of [iPhone X / 8 / 8 Plus CSS media queries](https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries) — Adam Buchanan Smith, Jun 13 '19 at 18:36

score 1 · Answer 1 · answered Jun 15 '19 at 18:36

Horay!!! I got the answer. There's no need to use many DPRs. If anybody need to do that use maximum DPR value. As an example, i phone x uses DPR value 3, Pixel 2 XL uses 3.5. So then i used DPR 4. Which do all things in one query. Thank you all for your responses.

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 4) { max-resolution: 4dppx; }

score 0 · Answer 2 · edited Jun 14 '19 at 02:31

0

@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 

    }

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 

}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 

}

edited Jun 14 '19 at 02:31

Book Of Zeus

49,509
18
174
171

answered Jun 14 '19 at 02:21

Nirosh

1

score 0 · Answer 3 · edited Jun 14 '19 at 07:50

Try This old coding sysytem

@media only screen and (min-width: 768px) {
  /* non-retina */
  .image1 {
    background-image: url("image1.jpg");
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
  only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 768px),
  only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
  only screen and (min-device-pixel-ratio: 2) and (min-width: 768px),
  only screen and (min-resolution: 2dppx) {
  /* retina display. dpr 2 */
  .image1 {
    background-image: url("image1@2x.jpg");
    background-size: 250px 400px;
    /* same size as normal image would be or on web it will scale up 2 times */
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) and (min-width: 768px),
  only screen and (min--moz-device-pixel-ratio: 3) and (min-width: 768px),
  only screen and (-o-min-device-pixel-ratio: 3/1) and (min-width: 768px),
  only screen and (min-device-pixel-ratio: 3) and (min-width: 768px),
  only screen and (min-resolution: 3dppx) {
  /* dpr 3 */
  .image1 {
    background-image: url("image1@3x.jpg");
    background-size: 250px 400px;
    /* same size as normal image would be or on web it will scale up 3 times */
  }
}

In css media queries, Device Pixel Ratio or DPR is not working for different DPR screens

3 Answers3