CODEWITHSUNDEEP
css
Shalika Madhupushpa
Shalika Madhupushpa

Reputation: 21

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

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

Upvotes: 1

Views: 3423

Answers (3)

Shalika Madhupushpa
Shalika Madhupushpa

Reputation: 21

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; }

Upvotes: 1

Nirosh Lakshitha
Nirosh Lakshitha

Reputation: 1

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("[email protected]");
    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("[email protected]");
    background-size: 250px 400px;
    /* same size as normal image would be or on web it will scale up 3 times */
  }
}

Upvotes: 0

Nirosh
Nirosh

Reputation: 1

@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){ 

}

Upvotes: 0

Related Questions