javascript - Get screen resolution on a mobile website

Question

I am designing a mobile website that has a section to download wallpapers from. In order to accommodate many users, I wish to make it possible to download a wallpaper based on the screen resolution. I want to detect resolution from JavaScript and show the appropriate wallpaper.

This is what I found online and tried and failed xD:

width  = window.innerWidth  || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;

For my SGS3, which has the resolution 720x1280 I get the 360x567.

How should I discover the resolution of the phone from JavaScript?

Answer 1

You can perhaps use the screen object:

var w = screen.width;
var h = screen.height;

Update - Try to use it with the window.devicePixelRatio:

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;