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