I am trying to represent a square in pixels on all screen sizes and have the measurement be accurate. So this works on desktop screen solutions from 1920 to 1080 and up.
getDpi() {
let screenWidth = screen.width;
let screenHeight = screen.height;
let widthInches = screenWidth / screen.width * devicePixelRatio;
let heightInches = screenHeight / screen.height * devicePixelRatio;
let diagonalInches = Math.sqrt(Math.pow(widthInches, 2) + Math.pow(heightInches, 2));
let diagonalPixels = Math.sqrt(Math.pow(screenWidth, 2) + Math.pow(screenHeight, 2));
let dpi = diagonalPixels / diagonalInches;
return dpi;
}
When I changed to a mobile device the square is much smaller. It looks like because the dpi of mobiles are much higher this is throwing off the calculation. If I multiple the dpi by four for example then the square looks like a more accurate size on a mobile screen. Bu I want a more accurate and solid way to do this?
Is there a way to do it?
