Javascript can detect the width and height of a device's screen using screen.width and screen.height.
For example this simple code returns screen width and height to the console:
var screenSizeX = screen.width;
var screenSizeY = screen.height;
console.log("Screen width is " +screenSizeX);
console.log("Screen height is " +screenSizeY);Knowing the correct width and height of popular device screens goes a long way towards determining how Media Queries organize CSS. However there are huge discrepancies between what Javascript detects and what manufacturers report in sales literature.
Example 1: On a Samsung S7 Edge Javascript returns a width of 640px and a height of 360px. However according to the manufacturer the width is 2560px and the height is 1440px with 534 pixels per inch.
Example 2: On an IPhone 7+ Javascript returns a width of 736px and a height of 414px. However according to Apple the width is 1920px and the height is 1080px with 401 pixels per inch.
Without owning a device and checking with Javascript this makes the true screen width and height of a device a mystery.
Why does Javascript return such a vastly different number compared to manufacturer stats? Is there a mathematical or code based way to rectify these discrepancies?
