how to use media query pixel but different inch monitor

Viewed 23

I have 2 monitor and 2 pc having different inches 21.5(resolution recommend 1600900) and 22.5 (resolution recommend 19201080) but both changed to 1366*768. I tried to use this my code but no idea how to detect inch and about DPI,DPPX,CSS pixel-ratio because both are the same, so I don't know what conditions to use , min DPI both are 96 and the other two are equal any idea to detect inch ? below is my css. Thank you

/* 21.5 inch 96DPI */
@media only screen and (max-width: 1366px)
and (min-resolution: 96dpi)
 {
  body{
    background-color: yellow;
  }
  #img{
    width: 50%;
  }
}

/* 22.5 inch 96DPI */
@media only screen and (max-width: 1366px)
and (min-resolution: 96dpi) {
  body{
    background-color: red;
  }
  #img{
    width: 60%;
  }
}
0 Answers
Related